HTML Input

html5中input的type类型有哪些

button

<按钮:<input type="button" value="按钮" name="bt" onclick=""/>

• 定义可以点击的按钮(大多与JavaScript使用来启动脚本)
  • type="button" 普通按钮
  • value 属性中输入的值为按钮上显示的文本
  • name 代表该按钮的名称
  • onclick 表示处理程序
  • 按钮的消失效果也可以通过CSS样式来设置

checkbox

北京<input type="checkbox" value="北京" name="city">
上海<input type="checkbox" value="上海" name="city">
杭州<input type="checkbox" value="杭州" name="city">
香港<input type="checkbox" value="香港" name="city">
澳门<input type="checkbox" value="澳门" name="city">

• type="checkbox" 复选框,用户可以进行多个选项
• value 属性中的值用来设置用户选中改项目后提交到数据库中的值
• name 为复选框的名称

color H5

颜色:<input type="color"/>

• type="color"颜色选择器
• 使用color属性能直接调用系统的颜色调节窗口
• 默认为黑色

data H5

<input type="date" min="2001-06-08" max="2016-04-03"/>

• 可以用来选择或输入日期，包括（年/月/日），不包括时间
  • type="date"定义日期字段(带有calendar控件)
  • min属性控制开始日期
  • max属性控制结束日期
  • value属性为默认值

time H5

<input type="time" min="00:12" max="10:12" value="00:12"/>

• type="time"定义日期字段的时分秒(带有time控件)
• min属性控制开始日期
• max属性控制结束日期
• value属性为默认值

datatime H5

<input type="datetime" id="datetime" value="2019-05-09T22:47Z">

• type="datetime"日期加时间控件（基于UTC时区,带有calendar,time控件）
• 创建日期时间，包括（年/月/日/时/分/秒/零点几秒）

month

<input type="month" value="2018-06"/>

• type="month"定义日期字段的月
• value属性用来控制年月

week

<input type="week" value="2018-W06"/>

• type="week"定义日期字段的月(带有calendar控件)
• value属性用来控制年周

email H5

邮箱:<input type="email"/>

• type="email"定义用于e-mail地址的文本字段
  • 若用户输入非email格式
  • 那么再支持HTML5的浏览器中提交改表单时
  • 会提示为不是合法格式

file

<input type="file" name="file" value="选择文件" />

• type="file"供文件上传
  • 文件域用于从本地硬盘中上传文件并提交

hidden

<input type="hidden" name="hidden" value="提交的值">

• type="hidden"定义隐藏输入字段
  • 隐藏域在页面上不显示
  • 用来存储与传递表单的值
  • 当用户提交表单时隐藏域的内容会一起提交给处理程序

image

<input type="image" src="图片URL" name="Yes" width="70" height="35"/>

• type="image"这个功能是将图片转为图片形式按钮
• src是链接图片的路径
• name为图片名称
• width为图片宽度
• height为图片高度
  • 当按下图片按钮会以name中的值向服务器发送信息

number H5

<input type="number" name="number" min="200" max="800" value="300" step="3"/>

• type="number"定义带有Spinner控件的数字字段
• min允许的最小值
• max为允许的最大值
• value规定默认值
• step可规定合法数字间隔

password

<input type="password" size="25" maxlength="15" value="">

• type="password"定义密码字段，字段中的字符会被遮蔽,密码输入框
  • size元素长度
  • maxlength最多允许输入长度
  • value输入框中默认显示
  • 主要区别在于内容的模糊，以防止用户附近的人阅读密码

radio

篮球<input type="radio" value="bb" name="bool">
足球<input type="radio" value="fb" name="bool">
乒乓<input type="radio" value="pp" name="bool" checked>

• type="radio"单选按钮
• value属性中的值用来设置用户选中改项后提交到数据库中的值
• name拥有相同name属性的单选框为同一组,一个组里只能同时选中一个选项
• checked初始默认选项

range H5

<input type="range" name="range" min="0" max="10" step="1" value=""/>

• type="range"定义用于精确值不重要的输入数字的控件(带有Slider控件)
• min允许的最小值
• max为允许的最大值
• value规定默认值
• step可规定合法数字间隔

reset

<input type="reset" value="重置" name="reset"/>

• type="reset"重置按钮,将表端字段重置为初始值
• value按钮上显示的文本

search

<input type="search" autocomplete="off"  placeholder="请输入关键词"/>

• type="search"定义用于搜索的文本字段
• input autocomplete="off"去掉弹出的下拉框
• placeholder默认显示文本
• required值为required表示输入不能为空

submit

<input type="submit" value="提交" name="sm"/>

• type="submit"提交按钮
• value属性中的值为按钮上显示的文字
  • 提交按钮不需要设置onclick参数
  • 在单击提交按钮时可以向服务器发送表单数据
  • 数据会发送到表单的action属性中指定的页面

tel

<input type='tel' maxlengt="11">

• type='tel'定义用于电话号码的文本字段
• maxlength手机端最多允许输入长度
  • 允许输入#,*

text

<input type="text" size="20" maxlength="20" value="文本输入框" color="red">

• type="text"文本输入框
• size元素长度
• maxlength最多允许输入长度
• value输入框默认显示
• color文字颜色red

url

<input type="url"/>

• type="url"限制用户输入URL类型

添加几个H5新增表单属性

• required="required"值不能为空
• placeholder="提示文本"表单的提示信息，存在默认值将不显示
• autofocus="autofocus"自动聚焦属性，页面加载完成自动聚焦到指定表单
• autocomplete="off/on"当用户在字段开始键入时，游览器基于之前键入过的值，应该显示出在字段中填写的选项
  • 默认已经打开，需要放在表单内，同时加上name属性，同时提交成功
• multiple="multiple"可以多选文件提交