小白教程
所有教程
关于
Search
172.70.34.249
172.70.34.249
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“HTML 表单Input类型”的源代码
本页内容
上一节:
HTML_表单元素
下一节:
HTML_表单Input属性
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
[[Category:HTML教程|47]] == HTML 输入类型 == 以下是您可以在 HTML 中使用的不同input类型: * ''' <nowiki><input type="button"></nowiki> ''' * ''' <nowiki><input type="checkbox"></nowiki> ''' * ''' <nowiki><input type="color"></nowiki> ''' * ''' <nowiki><input type="date"></nowiki> ''' * ''' <nowiki><input type="datetime-local"></nowiki> ''' * ''' <nowiki><input type="email"></nowiki> ''' * ''' <nowiki><input type="file"></nowiki> ''' * ''' <nowiki><input type="hidden"></nowiki> ''' * ''' <nowiki><input type="image"></nowiki> ''' * ''' <nowiki><input type="month"></nowiki> ''' * ''' <nowiki><input type="number"></nowiki> ''' * ''' <nowiki><input type="password"></nowiki> ''' * ''' <nowiki><input type="radio"></nowiki> ''' * ''' <nowiki><input type="range"></nowiki> ''' * ''' <nowiki><input type="reset"></nowiki> ''' * ''' <nowiki><input type="search"></nowiki> ''' * ''' <nowiki><input type="submit"></nowiki> ''' * ''' <nowiki><input type="tel"></nowiki> ''' * ''' <nowiki><input type="text"></nowiki> ''' * ''' <nowiki><input type="time"></nowiki> ''' * ''' <nowiki><input type="url"></nowiki> ''' * ''' <nowiki><input type="week"></nowiki> ''' <blockquote> ''' <nowiki>type</nowiki> '''属性的默认值为“text”。 </blockquote> == 输入类型文本 == ''' <nowiki><input type="text"></nowiki> '''定义 单行文本输入字段: <sample title="" hererun="s" desc="" > <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> </sample> 这就是上面的 HTML 代码在浏览器中的显示方式: <html> <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"> <input type="submit" value="提交"> </form> </html> == 密码 == ''' <nowiki><input type="password"></nowiki> '''定义一个密码字段: <sample title="" hererun="s" desc="" > <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"> <input type="submit" value="提交"> </form> </sample> 上面的 HTML 代码在浏览器中的显示为: <html> <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"> <input type="submit" value="提交"> </form> </html> <blockquote> 密码字段中的字符被屏蔽(显示为星号或圆圈)。 </blockquote> == 输入类型 提交 == ''' <nowiki><input type="submit"></nowiki> '''定义一个用于将表单数据 提交到表单处理程序的按钮。 表单处理程序通常是带有用于处理输入数据的脚本的服务器页面。 表单处理程序在表单的''' <nowiki>action</nowiki> ''' 属性中指定: <sample title="" hererun="s" desc="" > <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> </sample> 上面的 HTML 代码在浏览器中的显示为: <html> <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 属性,按钮将使用默认文本: <sample title="" hererun="s" desc="" > <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> </sample> == reset重置 == ''' <nowiki><input type="reset"></nowiki> '''定义一个重置按钮 ,它将所有表单值重置为其默认值: <sample title="" hererun="s" desc="" > <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> </sample> 上面的 HTML 代码在浏览器中的显示为: <html> <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" value="重置"> </form> </html> <blockquote> 如果更改输入值然后单击“重置”按钮,表单数据将重置为默认值。 </blockquote> == 单选 == ''' <nowiki><input type="radio"></nowiki> '''定义一个单选按钮。 单选按钮让用户只能选择有限数量的选项之一: <sample title="" hererun="s" desc="" > <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> <input type="submit" value="提交"> </form> </sample> 上面的 HTML 代码在浏览器中的显示为: <html> <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类型 == ''' <nowiki><input type="checkbox"></nowiki> '''定义一个复选框。 复选框让用户在有限的选项中选择零个或更多选项。 <sample title="" hererun="s" desc="" > <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> <input type="submit" value="提交"> </form> </sample> 上面的 HTML 代码在浏览器中的显示为: <html> <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> <input type="submit" value="提交"> </form> </html> == 按钮 == ''' <nowiki><input type="button"></nowiki> '''定义一个按钮: <sample title="" hererun="s" desc="" > <input type="button" onclick="alert('Hello World!')" value="Click Me!"> </sample> 上面的 HTML 代码在浏览器中的显示为: <html> <input type="button" onclick="alert('Hello World!')" value="Click Me!"> </html> == 颜色 == ''' <nowiki><input type="color"></nowiki> '''用于应包含颜色的输入字段。 根据浏览器支持,颜色选择器可以显示在输入字段中。 <sample title="" hererun="s" desc="" > <form> <label for="favcolor">选择您的最爱 颜色:</label> <input type="color" id="favcolor" name="favcolor"> </form> </sample> == 日期 == ''' <nowiki><input type="date"></nowiki> '''用于应包含日期的输入字段。 根据浏览器支持,日期选择器可以显示在输入字段中。 <sample title="" hererun="s" desc="" > <form> <label for="birthday">生日:</label> <input type="date" id="birthday" name="birthday"> </form> </sample> 您还可以使用''' <nowiki>min</nowiki> '''and''' <nowiki>max</nowiki> '''属性为日期添加限制: <sample title="" hererun="s" desc="" > <form> <label for="datemax">输入日期在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> </sample> == Datetime-local == ''' <nowiki><input type="datetime-local"></nowiki> '''指定日期和时间输入字段,没有时区。 根据浏览器支持,日期选择器可以显示在输入字段中。 <sample title="" hererun="s" desc="" > <form> <label for="birthdaytime">生日(日期和 时间):</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime"> </form> </sample> == 电子邮件 == ''' <nowiki><input type="email"></nowiki> '''用于应包含电子邮件地址的输入字段。 根据浏览器支持,提交时可以自动验证电子邮件地址。 一些智能手机识别电子邮件类型,并在键盘上添加“.com”以匹配电子邮件输入。 <sample title="" hererun="s" desc="" > <form> <label for="email">输入你的电子邮箱:</label> <input type="email" id="email" name="email"> </form> </sample> == 文件 == 为''' <nowiki><input type="file"></nowiki> ''' 文件上传定义了一个文件选择字段和一个“浏览”按钮。 <sample title="" hererun="s" desc="" > <form> <label for="myfile">选择一个文件:</label> <input type="file" id="myfile" name="myfile"> </form> </sample> == 隐藏类型 == 定义了一个隐藏的''' <nowiki><input type="hidden"></nowiki> ''' 输入字段(对用户不可见)。 隐藏字段允许 Web 开发人员在提交表单时包含用户无法看到或修改的数据。 隐藏字段通常存储提交表单时需要更新的数据库记录。 注意:虽然该值不会在页面内容中显示给用户,但可以使用任何浏览器的开发人员工具或“查看源代码”功能看到(并且可以编辑)。不要使用隐藏输入作为一种安全形式! <sample title="" hererun="s" desc="" > <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> </sample> == 年月 == ''' <nowiki><input type="month"></nowiki> '''允许用户选择月份和年份。 根据浏览器支持,日期选择器可以显示在输入字段中。 <sample title="" hererun="s" desc="" > <form> <label for="bdaymonth">生日(月份和 年):</label> <input type="month" id="bdaymonth" name="bdaymonth"> </form> </sample> == 数字 == ''' <nowiki><input type="number"></nowiki> '''定义了一个数字 输入字段。 您还可以对接受的数字设置限制。 以下示例显示一个数字输入字段,您可以在其中输入 1 到 5 之间的值: <sample title="" hererun="s" desc="" > <form> <label for="quantity">数量(1至 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> </form> </sample> == 输入限制 == 以下是一些常见输入限制的列表: {| class="table" ! 属性 ! 描述 |- | checked | 指定页面加载时应预选输入字段 |- | disabled | 指定应禁用输入字段 |- | max | 指定输入字段的最大值 |- | maxlength | 指定输入字段的最大字符数 |- | min | 指定输入字段的最小值 |- | pattern | 指定正则表达式以检查针对输入值 |- | readonly | 指定仅读取输入字段(无法更改) |- | required | 指定需要输入字段(必须填写) |- | size | 指定输入字段的长度(字符) |- | step | 指定输入字段的法定数字步长 |- | value | 指定输入字段的默认值 |} 您将在下一章中了解有关输入限制的更多信息。 以下示例显示了一个数字输入字段,您可以在其中输入一个从 0 到 100 的值,步长为 10。默认值为 30: <sample title="" hererun="s" desc="" > <form> <label for="quantity">数量:</label> <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30"> </form> </sample> == range 范围 == ''' <nowiki><input type="range"></nowiki> '''定义了一个用于输入精确值不重要的数字的控件(如滑块控件)。''' <nowiki>min</nowiki> '''默认范围是 0 到 100。但是,您可以使用、''' <nowiki>max</nowiki> '''和''' <nowiki>step</nowiki> '''属性设置接受哪些数字的限制: <sample title="" hererun="s" desc="" > <form> <label for="vol">Volume (between 0 and 50):</label> <input type="range" id="vol" name="vol" min="0" max="50"> </form> </sample> == search 搜索 == ''' <nowiki><input type="search"></nowiki> '''用于搜索字段(搜索字段的行为类似于常规文本字段)。 <sample title="" hererun="s" desc="" > <form> <label for="gsearch">搜索Google:</label> <input type="search" id="gsearch" name="gsearch"> </form> </sample> == tel 电话 == ''' <nowiki><input type="tel"></nowiki> '''用于应包含电话号码的输入字段。 <sample title="" hererun="s" desc="" > <form action="/third/http.php"> <label for="phone">输入你的电话号码:</label> <input type="tel" id="phone" name="phone" pattern="1[0-9]{10}"> <input type="submit"> </form> </sample> == time 时间 == ''' <nowiki><input type="time"></nowiki> '''允许用户选择时间(无时区)。 根据浏览器的支持,时间选择器可以显示在输入字段中。 <sample title="" hererun="s" desc="" > <form> <label for="appt">Select a time:</label> <input type="time" id="appt" name="appt"> </form> </sample> == URL 网址 == ''' <nowiki><input type="url"></nowiki> '''用于应包含 URL 地址的输入字段。 根据浏览器的支持,url 字段可以在提交时自动验证。 一些智能手机识别 url 类型,并在键盘上添加“.com”以匹配 url 输入。 <sample title="" hererun="s" desc="" > <form> <label for="homepage">添加您的主页:</label> <input type="url" id="homepage" name="homepage"> </form> </sample> == week 周 == 允许用户选择''' <nowiki><input type="week"></nowiki> ''' 一个周和一年。 根据浏览器支持,日期选择器可以显示在输入字段中。 <sample title="" hererun="s" desc="" > <form> <label for="week">选择一个星期:</label> <input type="week" id="week" name="week"> <input type="submit" value="提交"> </form> </sample>
返回至“
HTML 表单Input类型
”。
上一节:
HTML_表单元素
下一节:
HTML_表单Input属性