HTML表单元素--input输入类型（2）

叁歲伎倆 2022-12-20 11:10 127阅读 0赞

## HTML表单元素–input输入类型（2） ##

在HTML中，表单元素中的input元素是占很重要的地位的，第一原因是常用，第二是input元素有太多的type值。老的在之前的文章：input输入类型（1）中有讲解；这里主压迫详细介绍HTML5中新增的

HTML5 增加了多个新的type：

color 用于应该包含颜色的输入字段。

<form>
      Birthday:
      <input type="date" name="bday">
    </form>

date 用于应该包含日期的输入字段。

<form>
      Birthday:
      <input type="date" name="bday">
    </form>

datetime 允许用户选择日期和时间（有时区）

<form>
      Birthday (date and time):
      <input type="datetime" name="bdaytime">
    </form>

datetime-local 允许用户选择日期和时间（无时区）。

<form>
      Birthday (date and time):
      <input type="datetime-local" name="bdaytime">
    </form>

email 用于应该包含电子邮件地址的输入字段。根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。

<form>
      E-mail:
      <input type="email" name="email">
    </form>

month 允许用户选择月份和年份。根据浏览器支持，日期选择器会出现输入字段中。

<form>
      Birthday (month and year):
      <input type="month" name="bdaymonth">
    </form>

range 用于应该包含一定范围内的值的输入字段。

<form>
      <input type="range" name="points" min="0" max="10">
    </form>

search 用于搜索字段（搜索字段的表现类似常规文本字段）。

<form>
      Search Google:
      <input type="search" name="googlesearch">
    </form>

tel 用于应该包含电话号码的输入字段。

<form>
      Telephone:
      <input type="tel" name="usrtel">
    </form>

time 允许用户选择时间（无时区）。

<form>
      Select a time:
      <input type="time" name="usr_time">
    </form>

url 用于应该包含 URL 地址的输入字段。

<form>
      Add your homepage:
      <input type="url" name="homepage">
    </form>

week 允许用户选择周和年。

<form>
      Select a week:
      <input type="week" name="week_year">
    </form>

注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text

发表评论取消回复

表情：

评论列表（有 0 条评论，127人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML笔记：表单input标签

> 摘要：微信搜索【[三桥君][Link 1]】 > 说明：这是关于HTML5的代码笔记一、理论知识表单标签 from：表单的最外层容器 input：标

短命女/ 2023年03月04日 10:30/ 0 赞/ 170 阅读

相关 HTML表单元素--input输入类型（2）

HTML表单元素–input输入类型（2）在HTML中，表单元素中的input元素是占很重要的地位的，第一原因是常用，第二是input元素有太多的type值。老的在之前

叁歲伎倆/ 2022年12月20日 11:10/ 0 赞/ 128 阅读

相关 HTML表单元素

HTML表单元素 HTML中的表单元素，可以说是整个HTML中最常用也是最重要的部分，里面包含的太多的元素，尔每一个元素中的type类型又有很多种。所以需要大家理清楚区分

向右看齐/ 2022年12月20日 11:09/ 0 赞/ 146 阅读

相关 HTML表单元素概述,HTML表单元素的简单介绍

说明：以下内容是基于w3school及饥人谷教学内容，对HTML表单元素做的简单说明。元素元素定义 HTML 表单区间，而这个区间的数据将会被提交给后台。例子：请

我不是女神ヾ/ 2022年10月10日 02:08/ 0 赞/ 200 阅读

相关 HTML5表单元素

表单元素总汇 input 表示用来收集用户输入数据的控件 textarea 表示可以输入多行文本的控件 select 表示用来提供一组固定的选项

阳光穿透心脏的1/2处/ 2022年09月24日 13:15/ 0 赞/ 198 阅读

相关 HTML5表单元素

新的表单元素：`<datalist> <keygen> <output>` 1.datalist元素规定输入域的选项列表，datalist属性规定form或input

叁歲伎倆/ 2022年09月21日 01:28/ 0 赞/ 205 阅读

相关 HTML5 表单元素 —— input元素

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf8"

ゝ一世哀愁。/ 2022年07月11日 17:26/ 0 赞/ 697 阅读

相关 HTML5表单元素

一、表单控件 1.<form>元素用于生成表单，属性如下 1. action指定表单的发送地址（服务器地址） 2. method是表单数据发送至服务

深藏阁楼爱情的钟/ 2022年05月19日 22:22/ 0 赞/ 328 阅读

相关 HTML元素标签、表单元素详解

<html lang="en"> <head> <meta charset="UTF-8"> <title>网页的标题</title> </he

末蓝、/ 2022年04月18日 03:13/ 0 赞/ 405 阅读

相关 HTML表单元素--input输入类型（1）

HTML表单元素–input输入类型 HTML表单用于搜集不同类型的用户输入其中最常用到的就是input元素。 1.< form >元素：素定义 HTML 表单。其属

深藏阁楼爱情的钟/ 2022年02月14日 03:08/ 0 赞/ 467 阅读