首页 > 技术文章 > <input>标签总结

lzh739887959 2016-08-03 16:10 原文

 

第一和用法:<input>标签用于搜集用户信息。根据不同的type属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

提示和注释:注释:input元素是空的,它只包含属性。提示:请使用label元素为表单控件定义标签(label)。

说明:

属性                   说明

type              input元素类型                          

name                 input 元素的名称

value                  input 元素的值

size               input 元素的宽度

readonly            是否只读

maxlength        输入字符的最大长度

disabled            是否禁用

 

  1. 文本框:

在表单中,文本框用来让用户输入字母、数字等等,如用户的姓名,地址等。

  代码格式如下:

  <input type=”text” name=”...” size=”...” maxlength=”...” value=”...”/>

属性解释:

type=”text”:定义单行文本输入框;

name属性:定义文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;

size属性:定义文本框的宽度,单位是单个字符宽度;

value属性:定义文本框的初始值。

  1. 密码框:

是一种特殊的文本域,用于输入密码。

  代码格式如下:

  <input type=”password” name=”...”  size=”...” maxlength=”...” value=”...”/>

属性解释:

type=”password”定义密码框;

name属性:定义密码框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;

size属性:定义密码框的宽度,单位是单个字符宽度;

value属性:定义文本框的初始值。

  1. 隐藏域:

是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的。当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

  代码格式如下:

  <input type=”hidden” name=”...” value=”...”/>

属性解释:

type=”hidden”:定义隐藏域;

name属性:定义隐藏域的名称,要保证数据的准确采集,必须定义一个独一无二的名称;

value属性:定义文本框的初始值。

  1. 单选按钮:

当需要用户从有限个选项中选择一个时,使用单选按钮。比如我们在注册的时候选择体重。

  代码格式如下:

  <input type=”radio” name=”...” value=”...”/>

属性解释:

type=”radio”定义单选框;

name属性:定义单选框的名称,要保证数据的准确采集,单选框都是以组为单位使用的,在同一组中的单选项都必须同一个名称;

value属性:定义单选框的值,同一组中,他们的域值必须是不同的。

  1. 复选框:

允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素,都必须有一个独一的名称。

  代码格式如下:

  <input type=”checkbox” name=”...” value=”...”/>

属性解释:

type=”checkbox”定义复选框;

name属性:定义复选框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;

value属性:定义复选框的值。

  1. 文件上传框:

代码格式如下:

<input type”file” name=”...”

注意:利用这项功能时,在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。

说明:multipart 控件是否上传多文件

属性解释:

type=”file”:定义文件上传框;

name属性:定义文件上传框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;

 

 

HTML5的表单所有type类型

 

button

定义可点击的按钮(大多与 JavaScript 使用来启动脚本)

checkbox

定义复选框。

color

定义拾色器。

date

定义日期字段(带有 calendar 控件)

datetime

定义日期字段(带有 calendar 和 time 控件)

datetime-local

定义日期字段(带有 calendar 和 time 控件)

month

定义日期字段的月(带有 calendar 控件)

week

定义日期字段的周(带有 calendar 控件)

time

定义日期字段的时、分、秒(带有 time 控件)

email

定义用于 e-mail 地址的文本字段

file

定义输入字段和 "浏览..." 按钮,供文件上传

hidden

定义隐藏输入字段

image

定义图像作为提交按钮

number

定义带有 spinner 控件的数字字段

password

定义密码字段。字段中的字符会被遮蔽。

radio

定义单选按钮。

range

定义带有 slider 控件的数字字段。

reset

定义重置按钮。重置按钮会将所有表单字段重置为初始值。

search

定义用于搜索的文本字段。

submit

定义提交按钮。提交按钮向服务器发送数据。

tel

定义用于电话号码的文本字段。

text

默认。定义单行输入字段,用户可在其中输入文本。默认是 20 个字符。

url

定义用于 URL 的文本字段。

推荐阅读