HTML表单输入
HTML表单输入类型说明
在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 |
定义用于输入不带时区的日期的输入字段。 |
| email |
定义用于输入电子邮件地址的输入字段。 |
| month |
定义一个带有月份和年份的控件，没有时区。 |
| number |
定义一个输入字段以输入数字。 |
| url |
定义用于输入URL的字段 |
| week |
定义一个字段以输入带有星期年份的日期，没有时区。 |
| search |
定义用于输入搜索字符串的单行文本字段。 |
| tel |
定义用于输入电话号码的输入字段。 |
以下是带有示例的有关<input>元素类型的描述。
1、<input type="text">：
类型为"text"的<input>元素用于定义单行输入文本字段。
示例：
<form>
<label>输入名字</label><br>
<input type="text" name="firstname"><br>
<label>输入email</label><br>
<input type="text" name="email"><br>
<p><strong>注意:</strong>默认的最大长度为20。</p>
</form>
输出：
"文本"字段定义一个单行输入文本字段。
2、<input type="password">：
"password"类型的<input>元素允许用户在网页中安全地输入密码。密码文件中输入的文本将转换为" *"或"。"，以便其他用户无法读取。
示例：
<form>
<label>输入用户名</label><br>
<input type="text" name="firstname"><br>
<label>输入密码</label><br>
<input type="Password" name="password"><br>
<br><input type="submit" value="submit">
</form>
输出：
输入"密码"类型：
"密码" 字段定义一个单行输入密码字段，用于安全地输入密码。
3、<input type="submit">：
" submit"类型的<input>元素定义一个提交按钮，用于在发生" click"事件时将表单提交给服务器。
示例：
<form action="https://www.lidihuo.com/html/html-index.html">
<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"属性
4、 <input type="reset">：
<input>类型"reset"也被定义为按钮，但是当用户执行单击事件时，默认情况下它将重置所有输入的值。
示例：
<form>
<label>用户ID：</label><br>
<input type="text" name="user-id" value="user"><br>
<label>密码：</label><br>
<input type="password" name="pass" value="pass"><br>
<input type="submit" value="登录">
<input type="reset" value="重置">
</form>
输出：
尝试更改用户ID和密码的输入值，然后单击"重置"时，它将使用默认值重置输入字段。
5、 <input type="radio">：
<input>类型" radio"定义了单选按钮，这些单选按钮允许在一组相关选项之间选择一个选项。一次只能一次选择一个单选按钮选项。
示例：
<form>
<p>请选择您喜欢的颜色</p>
<input type="radio" name="color" value="red">红色<br>
<input type="radio" name="color" value="blue">蓝色<br>
<input type="radio" name="color" value="green">绿色<br>
<input type="radio" name="color" value="pink">粉色<br>
<input type="submit" value="submit">
</form>
输出：
6、 <input type="checkbox">：
<input>类型" checkbox"显示为方形框，可以选中或取消选中这些框以从给定选项中选择选项。
注意："单选"按钮与复选框类似，但是两种类型之间有一个重要区别：单选按钮允许用户一次仅选择一个选项，而复选框允许用户一次选择零到多个选项。
示例：
<form>
<label>输入您的姓名：</label>
<input type="text" name="name">
<p>请选择您喜欢的运动：</p>
<input type="checkbox" name="sport1" value="cricket">板球<br>
<input type="checkbox" name="sport2" value="tennis">网球<br>
<input type="checkbox" name="sport3" value="football">足球<br>
<input type="checkbox" name="sport4" value="baseball">棒球<br>
<input type="checkbox" name="sport5" value="badminton">羽毛球<br>
<input type="submit" value="submit">
</form>
输出：
7、 <input type="button">：
<input>类型的" button"定义了一个简单的按钮，可以对其进行编程以在任何事件（例如click事件）上进行功能控制。
注意：它主要用于JavaScript。
示例：
<form>
<input type="button" value="点击我" onclick="alert('您正在学习HTML')">
</form>
输出：
单击按钮以查看结果：
注意：在上面的示例中，我们使用了JS的"警报"，您将在我们的JS教程中学习。它用于显示弹出窗口。
8、 <input type="file">：
类型为"file"的<input>元素用于从用户设备存储中选择一个或多个文件。选择文件后，提交后，可以在JS代码和文件API的帮助下将该文件上传到服务器。
示例：
<form>
<label>选择要上传的文件：</label>
<input type="file" name="newfile">
<input type="submit" value="submit">
</form>
输出：
在不指定文件之前，我们可以选择任何类型的文件!所选文件将显示在"选择文件"选项旁边
9、 <input type="image">：
<input>类型的" image"用于表示图像形式的提交按钮。
示例：
<!DOCTYPE html>
<html>
<body>
<h2>Input "image" 类型.</h2>
<p>我们可以创建一个图像作为“提交”按钮</p>
<form>
<label>用户id:</label><br>
<input type="text" name="name"><br>
<input type="image" alt="提交" src="login.png" width="100px">
</form>
</body>
</html>
新添加的HTML5 <input>类型元素
1、 <input type="color">：
<input> 类型"color"用于定义包含颜色的输入字段。它允许用户通过浏览器上的可视颜色界面指定颜色。
注意："颜色"类型仅支持十六进制格式的颜色值，默认值为＃000000（黑色）。
<form>
挑选自己喜欢的颜色： <br>
<input type="color" name="upclick" value="#a52a2a"> Upclick<br>
<input type="color" name="downclick" value="#f5f5dc"> Downclick
</form>
输出:
注意：“颜色”类型的默认值为＃000000（黑色）。它仅支持十六进制格式的颜色值。
2. <input type="date">:
类型为“date”的<input>元素生成一个输入字段，该字段允许用户以给定格式输入日期。用户可以按文本字段或按日期选择器界面输入日期。
示例：
<form>
选择开始和结束日期： <br>
开始日期：<input type="date" name="Startdate"> <br>
结束日期：<input type="date" name="Enddate"> <br>
<input type="submit">
</form>
输出：
3. <input type="datetime-local">:
类型为“datetime-local”的<input>元素创建输入字段，该字段允许用户选择小时以及以分钟和分钟为单位的本地时间，而无需时区信息。
示例：
<form>
<label>
选择日期和时间： <input type="datetime-local" name="meetingdate"> <br>
</label>
<input type="submit">
</form>
输出:
4. <input type="email">:
<input>类型的“电子邮件”创建一个输入字段，该字段允许用户使用模式验证输入电子邮件地址。多个属性允许用户输入多个电子邮件地址。
示例：
<form>
<label><b>输入您的电子邮件地址</b></label>
<input type="email" name="email" required>
<input type="submit">
<p><strong>注意：</strong>用户还可以输入多个电子邮件地址，用逗号或空格分隔，如下所示：</p>
<label><b>Enter multiple Email-addresses</b></label>
<input type="email" name="email" multiple>
<input type="submit">
</form>
输出：
5. <input type="month">:
<input>类型的“ month”创建一个输入字段，该字段允许用户轻松输入“ MM，YYYY”格式的月份和年份，其中MM定义月份值，而YYYY定义年份值。
示例：
<form>
<label>输入您的出生年月 </label>
<input type="month" name="newMonth">
<input type="submit">
</form>
输出：
6. <input type="number">:
The <input> 元素类型编号创建输入字段，该字段允许用户输入数字值。您还可以使用min和max属性限制输入最小值和最大值。
示例：
<form>
<label>输入您的年龄：</label>
<input type="number" name="num" min="50" max="80">
<input type="submit">
</form>
输出：
注意:它将允许输入50-80之间的数字。如果要输入范围以外的数字，则会显示错误。
7. <input type="url">:
类型为“ url”的<input>元素创建一个输入字段，使用户能够输入URL。
示例：
<form>
<label>输入您的网站URL： </label>
<input type="url" name="website" placeholder="https://www.lidihuo.com"><br>
<input type="submit" value="send data">
</form>
输出：
8. <input type="week">:
<input> 类型的week创建一个输入字段，该字段允许用户从下拉日历中选择不带时区的星期和年份。
示例：
<form>
<label><b>选择一年中最好的一周：</b></label><br>
<input type="week" name="bestweek">
<input type="submit" value="Send data">
</form>
输出：
9. <input type="search">:
类型为“tel”的<input>元素。创建输入文件以输入电话号码。“电话”类型没有默认验证，例如电子邮件，因为电话号码的格式在全球范围内可能不同。
示例：
<form>
<label>搜索：</label>
<input type="search" name="q">
<input type="submit" value="search">
</form>
输出：
10. <input type="tel">:
类型为“tel”的<input>元素。创建输入文件以输入电话号码。“电话”类型没有默认验证，例如电子邮件，因为电话号码的格式在全球范围内可能不同。
示例：
<form>
<label><b>输入您的电话号码（格式为xxx-xxx-xxxx）：</label></br>
<input type="tel" name="telephone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
<input type="submit"><br><br>
</form>
输出：
注意: 这里我们使用“ pattern”和“ required”这两个属性，这将允许用户以给定格式输入数字，并且需要在输入字段中输入数字。
