章
目
录
在HTML中，<input type=””>是HTML表单的重要元素。<input>元素的”type”属性可以是各种类型，用于定义信息字段。例如，<input type=”text” name=”name”> 创建一个文本框。
<input>所有type列表
以下是HTML中<input>元素的所有type=""的列表
| 类型 | 描述 |
|---|---|
| text | 定义单行文本输入字段。 |
| password | 定义单行密码输入字段。 |
| submit | 定义用于将表单提交至服务器的提交按钮。 |
| reset | 定义用于重置表单中所有值的重置按钮。 |
| radio | 定义单选按钮，允许选择一个选项。 |
| checkbox | 定义复选框，允许选择多个选项。 |
| button | 定义简单的按钮，可编程执行事件上的任务。 |
| file | 定义从设备存储中选择文件的输入字段。 |
| image | 定义图形提交按钮。 |
HTML5 <input>新增类型
HTML5在<input>元素上添加了新类型。以下是HTML5中<input>元素类型的列表，以及带有示例的类型描述。
| 类型 | 描述 |
|---|---|
| color | 定义一个具有特定颜色的输入字段。 |
| date | 定义用于选择日期的输入字段。 |
| datetime-local | 定义用于输入无时区日期的输入字段。 |
| 定义用于输入电子邮件地址的输入字段。 | |
| month | 定义带有月份和年份但无时区的控件。 |
| number | 定义输入数字的输入字段。 |
| url | 定义用于输入URL的字段。 |
| week | 定义用于输入周-年日期但无时区的字段。 |
| search | 定义用于输入搜索字符串的单行文本字段。 |
| tel | 定义用于输入电话号码的输入字段。 |
<input>所有type列表示例
<input type=”text”>:
<input>元素的”type”为”text”用于定义单行输入文本字段。
示例：
<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 type=”password”>:
<input>元素的”type”为”password”用于允许用户在网页上安全地输入密码。在密码字段中输入的文本会被转换成”*”或”.”，以便其他用户无法阅读。
示例：
<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 type=”submit”>:
<input> 元素的 “submit” 类型定义了一个提交按钮，当发生 “click” 事件时，用于将表单提交到服务器。
例子：
<form action="https://www.javatpoint.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>
单击提交按钮后，将提交表单到服务器并重定向到 “action” 值。我们将在后面的章节中了解 “action” 属性。
<input type=”reset”>:
<input> 的 “reset” 类型也被定义为一个按钮，但当用户执行点击事件时，默认情况下会重置所有输入的值。
例子：
<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>
尝试更改用户ID和密码的输入值，然后单击重置，它将重置输入字段为默认值。
<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 type=”checkbox”>:
<input> 的 “checkbox” 类型显示为可以选中或取消选中的方形框，以选择给定选项。
注意：”radio” 按钮类似于复选框，但两者之间有一个重要区别：单选按钮允许用户一次只能选择一个选项，而复选框允许用户一次选择零到多个选项。
例子：
<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 type=”button”>
<input> 的 “button” 类型定义了一个简单的按钮，可以编程控制任何事件上的功能，例如单击事件。
注意：它主要与 JavaScript 一起使用。
例子：
<form>
<input type="button" value="Clcik me " onclick="alert('you are learning HTML')">
</form>
注意：在上面的例子中，我们使用了JS的 “alert”，你将在我们的JS教程中了解它。它用于显示弹出窗口。
<input type=”file”>:
具有 “file” 类型的 <input> 元素用于从用户设备存储中选择一个或多个文件。一旦选择了文件，并在提交后，可以使用JS代码和文件API将该文件上传到服务器。
例子：
<form>
<label>Select file to upload:</label>
<input type="file" name="newfile">
<input type="submit" value="submit">
</form>
输入 “file” 类型。我们可以选择任何类型的文件，直到我们指定它！所选文件将出现在 “选择文件” 选项旁边。
<input type=”image”>:
<input> 的 “image” 类型用于以图像的形式表示提交按钮。
例子：
<!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> 类型元素示例
<input type=”color”>:
<input> 的 “color” 类型用于定义一个包含颜色的输入字段。它允许用户通过浏览器上的视觉颜色界面指定颜色。
注意： “color” 类型仅支持十六进制格式的颜色值，默认值为 #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>
注意： “color” 类型的默认值为 #000000（黑色）。它仅支持十六进制格式的颜色值。
<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 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 type=”email”>:
“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 type=”month”>:
“month” 类型的 <input> 创建一个输入字段，允许用户轻松输入月份和年份，格式为 “MM, YYYY”，其中 MM 定义月份值，而 YYYY 定义年份值。
例子：
<form>
<label>Enter your Birth Month-year: </label>
<input type="month" name="newMonth">
<input type="submit">
</form>
<input type=”number”>:
“number” 类型的 <input> 元素创建一个输入字段，允许用户输入数字值。您还可以使用 “min” 和 “max” 属性限制输入最小值和最大值。
例子：
<form>
<label>Enter your age: </label>
<input type="number" name="num" min="50" max="80">
<input type="submit">
</form>
注意：它允许输入范围在50到80之间的数字。如果要输入范围之外的数字，它将显示错误。
<input type=”url”>:
“url” 类型的 <input> 元素创建一个输入字段，允许用户输入URL。
例子：
<form>
<label>Enter your website URL: </label>
<input type="url" name="website" placeholder="http://www.panziye.com"><br>
<input type="submit" value="send data">
</form>
<input type=”week”>:
“week” 类型创建一个输入字段，允许用户从下拉日历中选择一周和年份，不包含时区。
例子：
<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 type=”search”>:
“search” 类型创建一个输入字段，允许用户输入搜索字符串。它们在功能上与文本输入类型相似，但可能具有不同的样式。
例子：
<form>
<label>Search here:</label>
<input type="search" name="q">
<input type="submit" value="search">
</form>
<input type=”tel”>:
“tel” 类型的 <input> 元素创建一个输入字段，用于输入电话号码。 “tel” 类型没有默认验证，例如电子邮件，因为电话号码模式可以在全球范围内有所不同。
例子：
<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>
注意：这里我们使用了 “pattern” 和 “required” 两个属性，允许用户按给定格式输入号码，并且在输入字段中必须输入号码。
