具有两个输入字段的 HTML 表单; 一个文本字段和一个提交按钮:
<form action="/action_page.php"> <label for="username">Username: </label> <input type="text" id="username" name="username"><br> <input type="submit" value="Submit"> </form>
type
属性指定要显示的 <input>
元素的类型。
如果未指定 type
属性,则默认类型为“文本”。
Element | |||||
---|---|---|---|---|---|
type | Yes | Yes | Yes | Yes | Yes |
<input type="value">
值 | 描述 |
---|---|
button | 定义一个可点击按钮(主要与 JavaScript 一起使用以激活脚本) |
checkbox | 定义一个复选框 |
color | 定义颜色选择器 |
date | 定义日期控件(年、月、日(无时间)) |
datetime-local | 定义日期和时间控制(年、月、日、时间(无时区) |
定义电子邮件地址的字段 | |
file | 定义文件选择字段和“浏览”按钮(用于文件上传) |
hidden | 定义一个隐藏的输入字段 |
image | 将图像定义为提交按钮 |
month | 定义月份和年份控制(无时区) |
number | 定义用于输入数字的字段 |
password | 定义密码字段 |
radio | 定义一个单选按钮 |
range | 定义范围控件(如滑块控件) |
reset | 定义一个重置按钮 |
search | 定义用于输入搜索字符串的文本字段 |
submit | 定义提交按钮 |
tel | 定义用于输入电话号码的字段 |
text | 默认。 定义单行文本字段 |
time | 定义输入时间的控件(无时区) |
url | 定义用于输入 URL 的字段 |
week | 定义周和年控制(无时区) |
单击时激活 JavaScript 的按钮:
<script> function msg() { alert("Hello world!"); } </script> <input type="button" value="Click me" onclick="msg()">
复选框让用户从有限数量的选项中选择一个或多个选项:
<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><br>
从颜色选择器中选择一种颜色:
<label for="favcolor">Select your favorite color:</label> <input type="color" id="favcolor" name="favcolor">
定义一个日期控件:
<label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday">
定义日期和时间控件(无时区):
<label for="birthdaytime">Birthday (date and time):</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime">
为电子邮件地址定义一个字段(提交时将自动验证):
<label for="email">Enter your email:</label> <input type="email" id="email" name="email">
定义一个文件选择字段和一个“浏览...”按钮(用于文件上传):
<label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile">
定义一个隐藏字段(对用户不可见)。
隐藏字段通常存储提交表单时需要更新的数据库记录:
<input type="hidden" id="custId" name="custId" value="3487">
将图像定义为提交按钮:
<input type="image" src="../assets/chrome.svg" alt="Submit">
定义月份和年份控制(无时区):
<label for="bdaymonth">Birthday (month and year):</label> <input type="month" id="bdaymonth" name="bdaymonth">
定义一个用于输入数字的字段(您还可以设置接受哪些数字的限制):
<label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5">
使用以下属性来指定限制:
定义一个密码字段(字符被屏蔽):
<label for="pwd">Password:</label> <input type="password" id="pwd" name="pwd">
单选按钮让用户只选择有限数量的选项之一:
<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>
定义一个用于输入精确值不重要的数字的控件(如滑块控件)。 默认范围是 0 到 100。但是,您可以使用 min、max 和 step 属性设置接受哪些数字的限制:
<label for="vol">Volume (between 0 and 50):</label> <input type="range" id="vol" name="vol" min="0" max="50">
使用以下属性来指定限制:
定义一个重置按钮(将所有表单值重置为默认值):
<input type="reset">
提示: 小心使用重置按钮! 对于意外激活重置按钮的用户来说,这可能会很烦人。
定义搜索字段(如站点搜索或 Google 搜索):
<label for="gsearch">Search Google:</label> <input type="search" id="gsearch" name="gsearch">
定义提交按钮:
<input type="submit">
定义一个用于输入电话号码的字段:
<label for="phone">Enter your phone number:</label> <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
定义用户可以在其中输入文本的两个单行文本字段:
<label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br>
定义一个输入时间的控件(无时区):
<label for="appt">Select a time:</label> <input type="time" id="appt" name="appt">
定义一个用于输入 URL 的字段:
<label for="homepage">Add your homepage:</label> <input type="url" id="homepage" name="homepage">
提示: iPhone 上的 Safari 可识别 url 输入类型,并更改屏幕键盘以匹配它(添加 .com 选项)。
定义周和年控制(无时区):
<label for="week">Select a week:</label> <input type="week" id="week" name="week">