HTML 表单Input类型
HTML 输入类型
以下是您可以在 HTML 中使用的不同input类型:
- <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 属性的默认值为“文本”。
输入类型文本
<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>
这就是上面的 HTML 代码在浏览器中的显示方式:
输入类型密码
<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>
上面的 HTML 代码在浏览器中的显示为:
密码字段中的字符被屏蔽(显示为星号或圆圈)。
输入类型 提交
<input type="submit"> 定义一个用于将表单数据 提交到表单处理程序的按钮。
表单处理程序通常是带有用于处理输入数据的脚本的服务器页面。
表单处理程序在表单的 action 属性中指定:
示例
<form action="/third/http.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>
上面的 HTML 代码在浏览器中的显示为:
如果省略提交按钮的 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">Last name:</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">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">
<input type="reset">
</form>
上面的 HTML 代码在浏览器中的显示为:
如果更改输入值然后单击“重置”按钮,表单数据将重置为默认值。
输入类型
<input type="radio"> 定义一个单选按钮。
单选按钮让用户只能选择有限数量的选项之一:
示例
<p>Choose your favorite Web language:</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>
上面的 HTML 代码在浏览器中的显示为:
checkbox类型
<input type="checkbox"> 定义一个复选框。
复选框让用户在有限的选项中选择零个或更多选项。
示例
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
上面的 HTML 代码在浏览器中的显示为:
按钮
<input type="button"> 定义一个按钮:
示例
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
上面的 HTML 代码在浏览器中的显示为:
颜色
<input type="color"> 用于应包含颜色的输入字段。
根据浏览器支持,颜色选择器可以显示在输入字段中。
示例
<form>
<label for="favcolor">Select your favorite
color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
输入类型日期
<input type="date"> 用于应包含日期的输入字段。
根据浏览器支持,日期选择器可以显示在输入字段中。
示例
<form>
<label for="birthday">Birthday:</label>
<input
type="date" id="birthday" name="birthday">
</form>
您还可以使用 min and max 属性为日期添加限制:
示例
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date after
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">Birthday (date and
time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
输入类型电子邮件
<input type="email"> 用于应包含电子邮件地址的输入字段。
根据浏览器支持,提交时可以自动验证电子邮件地址。
一些智能手机识别电子邮件类型,并在键盘上添加“.com”以匹配电子邮件输入。
示例
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
输入类型文件
为 <input type="file"> 文件上传定义了一个文件选择字段和一个“浏览”按钮。
示例
<form>
<label for="myfile">Select a file:</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">Birthday (month and
year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
输入类型编号
<input type="number"> 定义了一个数字 输入字段。
您还可以对接受的数字设置限制。
以下示例显示一个数字输入字段,您可以在其中输入 1 到 5 之间的值:
示例
<form>
<label for="quantity">Quantity (between 1 and
5):</label>
<input type="number" id="quantity" name="quantity"
min="1" max="5">
</form>