本文概述
在HTML中, <input type =“”>是HTML表单的重要元素。输入元素的“类型”属性可以是定义信息字段的各种类型。如<input type =“ text” name =“ name”>给出一个文本框。
以下是HTML的所有<input>元素类型的列表。
| type =“” | 描述 |
|---|---|
| text | 定义单行文本输入字段 |
| password | 定义单行密码输入字段 |
| submit | 定义一个提交按钮以将表单提交到服务器 |
| reset | 定义一个重置按钮以重置表单中的所有值。 |
| radio | 定义一个单选按钮, 允许选择一个选项。 |
| checkbox | 定义允许选择多个选项形式的复选框。 |
| button | 定义一个简单的按钮, 可以将其编程为对事件执行任务。 |
| file | 定义从设备存储中选择文件。 |
| image | 定义一个图形提交按钮。 |
HTML5在<input>元素上添加了新类型。以下是HTML5元素类型的列表
| type =“” | 描述 |
|---|---|
| color | 定义具有特定颜色的输入字段。 |
| date | 定义用于选择日期的输入字段。 |
| datetime-local | 定义用于输入不带时区的日期的输入字段。 |
| 定义用于输入电子邮件地址的输入字段。 | |
| month | 用月和年定义控件, 不带时区。 |
| number | 定义输入数字的输入字段。 |
| url | 定义用于输入URL的字段 |
| week | 定义一个字段以输入带有星期年份的日期, 没有时区。 |
| search | 定义用于输入搜索字符串的单行文本字段。 |
| tel | 定义用于输入电话号码的输入字段。 |
以下是有关<input>元素类型的示例说明。
1. <input type =“ text”>：
类型为“文本”的<input>元素用于定义单行输入文本字段。
例：
<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>立即测试
输出：
Input "text" type:
The "text"field defines a sinlge line input text field.
Enter first name
Enter last name
Note:The default maximum cahracter lenght is 20.
2. <input type =“ password”>：
类型为“ password”的<input>元素允许用户在网页中安全地输入密码。密码文件中输入的文本将转换为“ *”或“。”, 以便其他用户无法读取。
例：
<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>立即测试
输出：
Input "password" type:
The "password"field defines a sinlge line input password field to enter the password securely.
Enter User name
Enter Password
3. <input type =“ submit”>：
类型为“ submit”的<input>元素定义了一个提交按钮, 用于在发生“ click”事件时将表单提交给服务器。
例：
<form action="https://www.srcmini02.com/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>立即测试
输出：
Input "submit" type:
Enter User name
Enter Password
After clicking on submit button, this will submit the form to server and will redirect the page to action
value.We will learn about "action" attribute in later chapters
4. <input type =“ reset”>：
<input>类型的“重置”也定义为按钮, 但是当用户执行单击事件时, 默认情况下它将重置所有输入的值。
例：
<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>立即测试
输出：
Input "reset" type:
User id:
Password:
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.
5. <input type =“ radio”>：
<input>类型的“ radio”定义单选按钮, 这些单选按钮允许在一组相关选项之间选择一个选项。一次只能一次选择一个单选按钮选项。
例：
<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>立即测试
输出：
Input "radio" type
Kindly Select your favorite color
Red
blue
green
pink
6. <input type =“ checkbox”>：
<input>类型的“复选框”显示为方形框, 可以选中或取消选中这些框以从给定选项中选择选项。
注意：“单选”按钮类似于复选框, 但是两种类型之间有一个重要区别：单选按钮允许用户一次只选择一个选项, 而复选框使用户一次可以选择零到多个选项。
例：
<form>
<label>Enter your Name:</label>
<input type="text" name="name">
<p>Kindly Select your favourite 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>立即测试
输出：
Input "checkbox" type
Registration Form
Enter your Name:
Kindly Select your favorite sports
Cricket
Tennis
Football
Baseball
Badminton
7. <input type =“ button”>：
<input>类型的“按钮”定义了一个简单的按钮, 可以将其编程为在任何事件（例如, 单击事件）上进行功能上的控制。
注意：它主要适用于JavaScript。
例：
<form>
<input type="button" value="Clcik me " onclick="alert('you are learning HTML')">
</form>立即测试
输出：
Input "button" type.
Click the button to see the result:
注意：在上面的示例中, 我们使用了JS的“警报”, 你将在我们的JS教程中学习。它用于显示弹出窗口。
8. <input type =“ file”>：
类型为“文件”的<input>元素用于从用户设备存储中选择一个或多个文件。选择文件后, 提交后, 可以在JS代码和文件API的帮助下将该文件上传到服务器。
例：
<form>
<label>Select file to upload:</label>
<input type="file" name="newfile">
<input type="submit" value="submit">
</form>立即测试
输出：
Input "file" type.
We can choose any type of file until we do not specify it! The selected file will appear at next to "choose file" option
Select file to upload:
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>类型的“颜色”用于定义包含颜色的输入字段。它允许用户通过浏览器上的可视颜色界面指定颜色。
注意：“颜色”类型仅支持十六进制格式的颜色值, 默认值为＃000000（黑色）。
例：
<form>
Pick your Favorite color: <br><br>
<input type="color" name="upclick" value="#a52a2a"> Upclick<br><br>
<input type="color" name="downclick" value="#f5f5dc"> Downclick
</form>立即测试
输出：
Input "color" types:
Pick your Favorite color:
Up-click
Down-click
Note:The default value of "color" type is #000000 (black). It only supports color value in hexadecimal format.
2. <input type =“ date”>：
类型为“ date”的<input>元素生成一个输入字段, 该字段允许用户以给定格式输入日期。用户可以按文本字段或按日期选择器界面输入日期。
例：
<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>立即测试
输出：
Input "date" type
Select Start and End Date:
Start date:
End date:
3. <input type =“ datetime-local”>：
类型为“ datetime-local”的<input>元素创建输入字段, 该字段允许用户选择小时和分钟中的日期以及本地时间, 而无需时区信息。
例：
<form>
<label>
Select the meeting schedule: <br><br>
Select date & time: <input type="datetime-local" name="meetingdate"> <br><br>
</label>
<input type="submit">
</form>立即测试
输出：
Input "datetime-local" type
Select the meeting schedule:
Select date & time:
4. <input type =“ email”>：
<input>类型的“电子邮件”创建一个输入字段, 该字段允许用户使用模式验证输入电子邮件地址。多个属性允许用户输入多个电子邮件地址。
例：
<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>立即测试
输出：
Input "email" type
Enter your Email-address
Note:User can also enter multiple email addresses separating by comma or whitespace as following:
Enter multiple Email-addresses
5. <input type =“ month”>：
<input>类型“ month”创建一个输入字段, 该字段允许用户以“ MM, YYYY”格式轻松输入月份和年份, 其中MM定义月份值, 而YYYY定义年份值。新
例：
<form>
<label>Enter your Birth Month-year: </label>
<input type="month" name="newMonth">
<input type="submit">
</form>立即测试
输出：
Input "month" type:
Enter your Birth Month-year:
6. <input type =“ number”>：
<input>元素类型编号创建输入字段, 该字段允许用户输入数字值。你还可以使用min和max属性限制输入最小值和最大值。
例：
<form>
<label>Enter your age: </label>
<input type="number" name="num" min="50" max="80">
<input type="submit">
</form>立即测试
输出：
Input "number" type
Enter your age:
Note: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.
7. <input type =“ url”>：
类型为“ url”的<input>元素创建一个输入字段, 使用户能够输入URL。
例：
<form>
<label>Enter your website URL: </label>
<input type="url" name="website" placeholder="http://example.com"><br>
<input type="submit" value="send data">
</form>立即测试
输出：
Input "url" type
Enter your website URL:
8. <input type =“ week”>：
<input>类型的周创建一个输入字段, 该字段允许用户从下拉日历中选择不带时区的星期和年份。
例：
<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>立即测试
输出：
Input "week" type
Select your best week of year:
9. <input type =“ search”>：
<input>类型的“搜索”创建一个输入字段, 该字段允许用户输入搜索字符串。这些在功能上与文本输入类型对称, 但可以使用不同的样式。
例：
<form>
<label>Search here:</label>
<input type="search" name="q">
<input type="submit" value="search">
</form>立即测试
输出：
Input "search" type
Search here:
10. <input type =“ tel”>：
<tel>类型的<input>元素创建输入文件以输入电话号码。 “电话”类型没有默认验证, 例如电子邮件, 因为电话号码的格式在全球范围内可能不同。
例：
<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>立即测试
输出：
Input "tel" type
Enter your Telephone Number(in format of xxx-xxx-xxxx):
Note: 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.
