前端必知必会-html中input的type设置

文章目录

• HTML type的设置
• 输入类型文本
• 输入类型密码
• 输入类型提交
• 输入类型重置
• 输入类型单选按钮
• 输入类型复选框
• 输入类型按钮
• 输入类型颜色
• 输入类型日期
• 输入类型 Datetime-local
• 输入类型电子邮件
• 输入类型图像
• 输入类型 文件
• 输入类型 隐藏
• 输入类型 月份
• 输入类型 数字
• 输入类型范围
• 输入类型搜索
• 输入类型 Tel
• 输入类型 Time
• 输入类型 Url
• 输入类型 Week
• 总结

---

HTML type的设置

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">

提示：type 属性的默认值为“text”。

输入类型文本

<input type="text"> 定义单行文本输入字段：

示例

<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form> 

输入类型密码

<input type="password"> 定义密码字段：

示例

<form> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br> <label for="pwd">Password:</label><br> <input type="password" id="pwd" name="pwd"> </form> 

密码字段中的字符被屏蔽（显示为星号或圆圈）。

输入类型提交

<input type="submit"> 定义用于将表单数据提交给表单处理程序的按钮。

表单处理程序通常是一个带有用于处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定：

示例

<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> 

如果省略提交按钮的 value 属性，按钮将获得默认文本：

示例

<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">姓氏：</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit"> </form> 

输入类型重置

<input type="reset">定义一个重置按钮，该按钮将重置所有表单值，使其恢复为默认值：

示例

<form action="/action_page.php"> <label for="fname">名字：</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">姓氏：</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form> 

如果您更改输入值，然后单击“重置”按钮，表单数据将重置为默认值。

输入类型单选按钮

<input type="radio"> 定义单选按钮。

单选按钮让用户只能从有限数量的选项中选择一个：

示例

<p>选择您最喜欢的 Web 语言：</p>  <form> <input type="radio" id="html" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="CSS"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value="JavaScript"> <label for="javascript">JavaScript</label> </form> 

输入类型复选框

<input type="checkbox">定义复选框。

复选框让用户可以从有限数量的选项中选择零个或多个选项。

示例

<form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> 我有一辆自行车</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> 我有一辆汽车</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> 我有一艘船</label> </form> 

输入类型按钮

<input type="button"> 定义一个按钮：

示例

<input type="button" onclick="alert('Hello World!')" value="Click Me!"> 

上面的 HTML 代码将在浏览器中显示如下浏览器：

输入类型颜色

<input type="color"> 用于应包含颜色的输入字段。

根据浏览器支持，颜色选择器可以显示在输入字段中。

示例

<form> <label for="favcolor">选择您喜欢的颜色：</label> <input type="color" id="favcolor" name="favcolor"> </form> 

输入类型日期

<input type="date"> 用于应包含日期的输入字段。

根据浏览器支持，日期选择器可以显示在输入字段中。

示例

<form> <label for="birthday">生日：</label> <input type="date" id="birthday" name="birthday"> </form> 

您还可以使用 min 和 max 属性为日期添加限制：

示例

<form> <label for="datemax">输入 1980-01-01 之前的日期：</label> <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br> <label for="datemin">输入 2000-01-01 之后的日期：</label> <input type="date" id="datemin" name="datemin" min="2000-01-02"> </form> 

输入类型 Datetime-local

<input type="datetime-local">指定日期和时间输入字段，不带时区。

根据浏览器支持情况，日期选择器可以显示在输入字段中。

示例

<form> <label for="birthdaytime">生日（日期和时间）：</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime"> </form> 

输入类型电子邮件

<input type="email">用于应包含电子邮件地址的输入字段。

根据浏览器支持情况，电子邮件地址可以在提交时自动验证。

某些智能手机可以识别电子邮件类型，并在键盘上添加“.com”以匹配电子邮件输入。

示例

<form> <label for="email">输入您的电子邮件：</label> <input type="email" id="email" name="email"> </form> 

输入类型图像

<input type="image">将图像定义为提交按钮。

图像的路径在 src 属性中指定。

示例

<form> <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> </form> 

输入类型 文件

<input type="file"> 定义文件选择字段和文件上传的“浏览”按钮。

示例

<form> <label for="myfile"> 选择文件：</label> <input type="file" id="myfile" name="myfile"> </form> 

输入类型 隐藏

<input type="hidden"> 定义隐藏输入字段（用户不可见）。

隐藏字段允许 Web 开发人员在提交表单时包含用户无法看到或修改的数据。

隐藏字段通常存储在提交表单时需要更新的数据库记录。

注意：虽然该值不会在页面内容中显示给用户，但可以使用任何浏览器的开发人员工具或“查看源代码”功能看到（并可以编辑）。不要使用隐藏输入作为安全措施！

示例

<form> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <input type="hidden" id="custId" name="custId" value="3487"> <input type="submit" value="Submit"> </form> 

输入类型 月份

<input type="month">允许用户选择月份和年份。

根据浏览器支持，日期选择器可以显示在输入字段中。

示例

<form> <label for="bdaymonth">生日（月份和年份）：</label> <input type="month" id="bdaymonth" name="bdaymonth"> </form> 

输入类型 数字

<input type="number">定义数字输入字段。

您还可以设置对可接受数字的限制。

以下示例显示一个数字输入字段，您可以在其中输入 1 到 5 之间的值：

示例

<form> <label for="quantity">数量（介于 1 和 5 之间）：</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> </form> 

输入限制
以下是一些常见输入限制的列表：

属性	描述
checked	指定在页面加载时应预先选择输入字段（对于 type=“checkbox” 或 type=“radio”）
disabled	指定应禁用输入字段
max	指定输入字段的最大值
maxlength	指定输入字段的最大字符数
min	指定输入字段的最小值
pattern	指定用于检查输入值的正则表达式
readonly	指定输入字段是只读的（不能更改）
required	指定输入字段是必填的（必须填写）
size	指定输入的宽度（以字符为单位） field
step	指定输入字段的合法数字间隔
value	指定输入字段的默认值

以下示例显示一个数字输入字段，您可以在其中输入从 0 到 100 的值，步长为 10。默认值为 30:

示例

<form> <label for="quantity">数量：</label> <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30"> </form> 

输入类型范围

<input type="range"> 定义用于输入其确切值不重要的数字的控件（如滑块控件）。默认范围是 0 到 100。但是，您可以使用 min、max 和 step 属性设置接受数字的限制：

示例

<form> <label for="vol">成交量（介于 0 和 50 之间）：</label> <input type="range" id="vol" name="vol" min="0" max="50"> </form> 

输入类型搜索

<input type="search"> 用于搜索字段（搜索字段的行为类似于常规文本字段）。

示例

<form> <label for="gsearch">搜索 Google：</label> <input type="search" id="gsearch" name="gsearch"> </form> 

输入类型 Tel

<input type="tel">用于应包含电话号码的输入字段。

示例

<form> <label for="phone">输入您的电话号码：</label> <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> </form> 

输入类型 Time

<input type="time">允许用户选择时间（无时区）。

根据浏览器支持，时间选择器可以显示在输入字段中。

示例

<form> <label for="appt">选择时间：</label> <input type="time" id="appt" name="appt"> </form> 

输入类型 Url

<input type="url">用于应包含 URL 地址的输入字段。

根据浏览器支持，url 字段可以在提交时自动验证。

某些智能手机可以识别 url 类型，并在键盘上添加“.com”以匹配 url 输入。

示例

<form> <label for="homepage">添加您的主页：</label> <input type="url" id="homepage" name="homepage"> </form> 

输入类型 Week

<input type="week">允许用户选择周和年。

根据浏览器支持，日期选择器可以显示在输入字段中。

示例

<form> <label for="week">选择一周：</label> <input type="week" id="week" name="week"> </form> 

---

总结

本文介绍了的html中input的type设置，如有问题欢迎私信和评论