- 您好！欢迎来到鲲鹏知舟
HTML 表单输入类型
在 HTML 中 <input type=""> 是 HTML 表单的重要元素。input元素的“type”属性可以是各种类型，它定义了信息字段。如 <input type="text" name="name"> 给出了一个文本框。
以下是 HTML 的所有 <input> 元素类型的列表。
| 类型="" | 描述 |
|---|---|
| text | 定义单行文本输入字段 |
| password | 定义单行密码输入字段 |
| submit | 定义一个提交按钮将表单提交到服务器 |
| reset | 定义一个重置按钮来重置表单中的所有值。 |
| radio | 定义一个单选按钮，允许选择一个选项。 |
| checkbox | 定义允许选择多个选项表单的复选框。 |
| button | 定义一个简单的按钮，可以对其进行编程以对事件执行任务。 |
| file | 定义从设备存储中选择文件。 |
| image | 定义一个图形提交按钮。 |
HTML5 在 <input> 元素上添加了新类型。以下是HTML5的元素类型列表
| 类型="" | 描述 |
|---|---|
| color | 定义具有特定颜色的输入字段。 |
| date | 定义用于选择日期的输入字段。 |
| datetime-local | 定义用于输入不带时区的日期的输入字段。 |
| 定义用于输入电子邮件地址的输入字段。 | |
| month | 定义带有月份和年份的控件，没有时区。 |
| number | 定义输入字段以输入数字。 |
| url | 定义用于输入 URL 的字段 |
| week | 定义一个字段以输入带周-年的日期，不带时区。 |
| search | 定义用于输入搜索字符串的单行文本字段。 |
| tel | 定义用于输入电话号码的输入字段。 |
以下是关于 <input> 元素类型的示例说明。
1. <input type="text">:
“文本”类型的 <input> 元素用于定义单行输入文本字段。
例子：
<!DOCTYPE html> <html> <body> <h3>Input "text" type:</h3> <p>The <strong>"text"</strong>field defines a sinlge line input text field. </p> <form> <label>Enter first name</label><br> <input type="text" name="firstname"><br> <label>Enter last name</label><br> <input type="text" name="lastname"><br> <p><strong>Note:</strong>The default maximum cahracter lenght is 20.</p> </form> </body> </html>
输出：
输入“文本”类型：
在“文本”字段定义的单层线输入文本字段。
2. <input type="password">：
“password”类型的 <input> 元素允许用户在网页中安全地输入密码。密码字段中输入的文本转换为“*”或“.”，其他用户无法读取。
例子：
<!DOCTYPE html> <html> <body> <h3>Input "password" type:</h3> <p>The <strong>"password"</strong>field defines a sinlge line input password field to enter the password securely. </p> <form> <label>Enter User name</label><br> <input type="text" name="firstname" ><br> <label>Enter Password</label><br> <input type="Password" name="password"><br> <br><input type="submit" value="submit"> </form> </body> </html>
输出：
输入“密码”类型：
的“密码”字段定义的单层线输入密码字段来安全地输入密码。
3. <input type="submit">：
“submit”类型的 <input> 元素定义了一个提交按钮，用于在“click”事件发生时将表单提交给服务器。
例子：
<!DOCTYPE html> <html> <body> <h3>Input "submit" type:</h3> <form action="https://www.rocschool.com/tutorial/html-tutorial";> <label>Enter User name</label><br> <input type="text" name="firstname"><br> <label>Enter Password</label><br> <input type="Password" name="password"><br> <br><input type="submit" value="submit"> </form> <p>After clicking on submit button, this will submit the form to server and will redirect the page to <strong>action </strong> value.We will learn about "action" attribute in later chapters</p> </body> </html>
输出：
输入“提交”类型：
点击提交按钮后，这会将表单提交到服务器并将页面重定向到动作 值。我们将在后面的章节中了解“动作”属性
4. <input type="reset">：
<input> 类型“重置”也被定义为一个按钮，但是当用户执行点击事件时，它默认重置所有输入的值。
例子：
<!DOCTYPE html> <html> <body> <h3>Input "reset" type:</h3> <form> <label>User id: </label> <input type="text" name="user-id" value="user"> <label>Password: </label> <input type="password" name="pass" value="pass"><br><br> <input type="submit" value="login"> <input type="reset" value="Reset"> </form> <p>Try to change the input values of user id and password, then when you click on reset, it will reset input fields with default values. </p> </body> </html>
输出：
输入“重置”类型：
尝试更改用户名和密码的输入值，然后当您单击重置时，它会将输入字段重置为默认值。
5. <input type="radio">：
<input> 类型“radio”定义了单选按钮，允许在一组相关选项之间选择一个选项。一次只能选择一个单选按钮选项。
例子：
<!DOCTYPE html> <html> <body> <h3>Input "radio" type</h3> <form> <p>Kindly Select your favorite color</p> <input type="radio" name="color" value="red"> Red <br> <input type="radio" name="color" value="blue"> blue <br> <input type="radio" name="color" value="green">green <br> <input type="radio" name="color" value="pink">pink <br> <input type="submit" value="submit"> </form> </body> </html>
输出：
输入“收音机”类型
6. <input type="checkbox">：
<input> 类型“复选框”显示为方框，可以选中或取消选中这些方框以从给定选项中选择选项。
注意：“单选”按钮类似于复选框，但两种类型之间有一个重要区别：单选按钮允许用户一次只选择一个选项，而复选框允许用户一次选择零到多个选项.
例子：
<!DOCTYPE html> <html> <body> <h2>Input "checkbox" type</h2><br> <h3>Registration Form</h3> <form> <label>Enter your Name:</label> <input type="text" name="name"> <p>Kindly Select your favorite sports</p> <input type="checkbox" name="sport1" value="cricket">Cricket<br> <input type="checkbox" name="sport2" value="tennis">Tennis<br> <input type="checkbox" name="sport3" value="football">Football<br> <input type="checkbox" name="sport4" value="baseball">Baseball<br> <input type="checkbox" name="sport5" value="badminton">Badminton<br><br> <input type="submit" value="submit"> </form> </body> </html>
输出：
输入“复选框”类型
报名表格
7. <input type="button">:
<input> 类型的“按钮”定义了一个简单的按钮，它可以被编程来控制任何事件的功能，例如点击事件。
注意：它主要适用于 JavaScript。
例子：
<!DOCTYPE html>
<html>
<body>
<h2>Input "button" type.</h2>
<p>Click the button to see the result: </p>
<form>
<input type="button" value="Click me" onclick="alert('you are learning HTML')">
</form>
</body>
</html>输出：
输入“按钮”类型。
点击按钮查看结果：
注意：在上面的示例中，我们使用了 JS 的“警报”，您将在我们的 JS 教程中学习。它用于显示弹出窗口。
8. <input type="file">：
类型为“file”的 <input> 元素用于从用户设备存储中选择一个或多个文件。选择文件后，提交后，可以借助JS代码和文件API将该文件上传到服务器。
例子：
<!DOCTYPE html> <html> <body> <h2>Input "file" type.</h2> <p>We can choose any type of file until we do not specify it! The selected file will appear at next to "choose file" option</p> <form> <label>Select file to upload:</label> <input type="file" name="newfile"> <input type="submit" value="submit"> </form> </body> </html>
输出：
输入“文件”类型。
我们可以选择任何类型的文件，直到我们不指定它为止！所选文件将出现在“选择文件”选项旁边
9. <input type="image">:
<input> 类型“图像”用于以图像的形式表示提交按钮。
例子：
<!DOCTYPE html> <html> <body> <h2>Input "image" type.</h2> <p>We can create an image as submit button</p> <form> <label>User id:</label><br> <input type="text" name="name"><br><br> <input type="image" alt="Submit" src="login.png" width="100px"> </form> </body> </html>
HTML5 新增 <input> 类型元素
1. <input type="color">：
<input> 类型“颜色”用于定义包含颜色的输入字段。它允许用户通过浏览器上的视觉颜色界面指定颜色。
注意：“color”类型只支持十六进制格式的颜色值，默认值为#000000（黑色）。
例子：
<!DOCTYPE html> <html> <body> <h3>Input "color" types:</h3> <form> Pick your Favorite color: <br><br> <input type="color" name="upclick" value="#a52a2a"> Up-click<br><br> <input type="color" name="downclick" value="#f5f5dc"> Down-click </form> <p><strong>Note:</strong>The default value of "color" type is #000000 (black). It only supports color value in hexadecimal format.</p> </body> </html>
输出：
输入“颜色”类型：
注意： “颜色”类型的默认值为#000000（黑色）。它只支持十六进制格式的颜色值。
2. <input type="date">：
“date”类型的 <input> 元素生成一个输入字段，允许用户以给定格式输入日期。用户可以通过文本字段或日期选择器界面输入日期。
例子：
<!DOCTYPE html> <html> <body> <h3>Input "date" type</h3> <form> Select Start and End Date: <br><br> <input type="date" name="Startdate"> Start date:<br><br> <input type="date" name="Enddate"> End date:<br><br> <input type="submit"> </form> </body> </html>
输出：
输入“日期”类型
3. <input type="datetime-local">：
“datetime-local”类型的 <input> 元素创建输入字段，允许用户在没有时区信息的情况下以小时和分钟选择日期和本地时间。
例子：
<!DOCTYPE html> <html> <body> <h3>Input "datetime-local" type</h3> <form> <label> Select the meeting schedule: <br><br> Select date & time: <input type="datetime-local" name="meetingdate"> <br><br> </label> <input type="submit"> </form> </body> </html>
输出：
输入“日期时间-本地”类型
4. <input type="email">：
<input> 类型“email”创建一个输入字段，允许用户输入带有模式验证的电子邮件地址。多个属性允许用户输入多个电子邮件地址。
例子：
<!DOCTYPE html> <html> <body> <h3>Input "email" type</h3> <form> <label><b>Enter your Email-address</b></label> <input type="email" name="email" required> <input type="submit"> <p><strong>Note:</strong>User can also enter multiple email addresses separating by comma or whitespace as following: </p> <label><b>Enter multiple Email-addresses</b></label> <input type="email" name="email" multiple> <input type="submit"> </form> </body> </html>
输出：
输入“电子邮件”类型
5. <input type="month">：
<input> 类型“month”创建一个输入字段，允许用户以“MM, YYYY”的格式轻松输入月份和年份，其中 MM 定义月份值，YYYY 定义年份值。新的
例子：
<!DOCTYPE html> <html> <body> <h3>Input "month" type:</h3> <form> <label>Enter your Birth Month-year: </label> <input type="month" name="newMonth"> <input type="submit"> </form> </body> </html>
输出：
输入“月”类型：
6. <input type="number">:
<input> 元素类型编号创建允许用户输入数值的输入字段。您还可以使用 min 和 max 属性限制输入最小值和最大值。
例子：
<!DOCTYPE html> <html> <body> <h3>Input "number" type</h3> <form> <label>Enter your age: </label> <input type="number" name="num" min="50" max="80"> <input type="submit"> </form> <p><strong>Note:</strong>It will allow to enter number in range of 50-80. If you want to enter number other than range, it will show an error.</p> </body> </html>
输出：
输入“数字”类型
注意：它将允许输入 50-80 范围内的数字。如果要输入范围以外的数字，则会显示错误。
7. <input type="url">:
“url”类型的 <input> 元素创建一个输入字段，允许用户输入 URL。
例子：
<!DOCTYPE html> <html> <body> <h3>Input "url" type</h3> <form> <label>Enter your website URL: </label> <input type="url" name="website" placeholder="https://www.rocschool.com";><br> <input type="submit" value="send data"> </form> </body> </html>
输出：
输入“url”类型
8. <input type="week">:
<input> 类型周创建一个输入字段，允许用户从没有时区的下拉日历中选择周和年。
例子：
<!DOCTYPE html> <html> <body> <h2>Input "week" type</h2> <form> <label><b>Select your best week of year:</b></label><br><br> <input type="week" name="bestweek"> <input type="submit" value="Send data"> </form> </body> </html>
输出：
输入“星期”类型
9. <input type="search">：
<input> 类型“搜索”创建一个输入字段，允许用户输入搜索字符串。这些在功能上与文本输入类型对称，但样式可能不同。
例子：
<!DOCTYPE html> <html> <body> <h2>Input "search" type</h2> <form> <label>Search here:</label> <input type="search" name="q"> <input type="submit" value="search"> </form> </body> </html>
输出：
输入“搜索”类型
10. <input type="tel">：
tel 类型的 <input> 元素 创建一个输入字段来输入电话号码。“tel”类型没有默认验证，例如电子邮件，因为电话号码模式在全球范围内可能会有所不同。
例子：
<!DOCTYPE html>
<html>
<body>
<h2>Input "tel" type</h2>
<form>
<label><b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b></label>
<input type="tel" name="telephone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
<input type="submit"><br><br>
</form>
<p><b>Note:</b> Here we are using two attributes that are "pattern" and"required" which will allow user to enter the number in given format and it is required to enter the number in input field.</p>
</body>
</html>输出：
输入“电话”类型
注意： 这里我们使用了“pattern”和“required”两个属性，它们将允许用户以给定格式输入数字，并且需要在输入字段中输入数字。
-
使用社交账号登录,本站支持
全部评论(0)