input标签最全面的type属性

#input标签最全面的type属性| 来源: 网络整理| 查看: 265

由于时间关系，在上一节中只是简单的列举了input标签中的type属性，在本节中就详细地来运用input标签中的type属性。

因为以下要举例演示，所以在讲input type之前先了解一下控制input标签的几个基本控制属性，如下：

name属性：元素的名称；这个不需要多解释了，也就是name的取值代表为当前input元素起个名字； size属性：元素的宽度；很多人都知道在HTML中，常见的宽度是用 width 表示的，而在input中 width 属性只使用与 type="image" 时使用，input元素的宽度需要通过size属性来设定，size的值为数字，数字越大input元素越长，数字越小input元素越短； value属性：定义input元素的默认值；当 input type="text"、"password"、"hidden" 时，定义输入字段的初始值；当 input type="button", "reset", "submit" 时，定义按钮上的显示的文本；当 input type="checkbox", "radio", "image" 时，定义与输入相关联的值；注意：input type="checkbox" 和 input type="radio" 中必须设置 value 属性；value属性无法与 input type="file" 一同使用。 maxlength属性：定义input元素中可输入的最长字符数；如 maxlength="50" 表示最多可以输入50个字符； style属性：为input元素设定CSS样式； width属性：当 input type="image"时，通过width属性控制元素的宽度； height属性：当 input type="image"时，通过width属性控制元素的高度； input type属性大全

type="text"：创建单行文本输入框

上图代码的意思依次为：input元素类型为文本输入框；元素长度等于30；最多只能输入20个字符；输入框中默认显示“HTML标签”几个字，设定输入CSS样式高度30像素；文字灰色；请看下方显示效果：请在文本框中输入文本，最多20个字符 →

type="password"：密码输入框

上图代码的意思依次为：input元素类型为密码输入框；元素长度等于30；最多能输入30个字符；输入框中默认显示为空；请看下方显示效果：请输入密码，最多30个字符 →

type="radio"：单选按钮

图中设置input元素为单选按钮，其中value属性中的值用来设置用户选中该项目后提交到数据库中的值；拥有相同name属性的单选框为同一组，一个组里只能同时选中一个选项；而checked属性表示的是初始选项，在用户还没进行选中之前，初始值会选中“女”这个项目；请在下方选择你的性别：

男女同性恋

type="checkbox"：复选框

设置input元素为复选控件，用户可以进行多个选项，其中value属性中的值用来设置用户选中该项目后提交到数据库中的值；name为控件的名称；请在下方选择你去过的城市：

广州深圳珠海东莞

type="button"：普通按钮

通过type="butt"设置普通按钮控件，在value属性中输入的值为按钮上显示的文本；name代表该按钮的名称；onclick表示处理程序；按钮的显示效果也可以通过CSS样式来设置；请点击按钮 →

type="submit"：提交按钮

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

type="reset"：重置按钮

重置按钮的作用是点击之后表单会刷新回到默认状态，在value属性中输入的值为按钮上显示的文本；请点击重置 →

type="image"：图像按钮

虽然显示是图片，实际是以图片的形式按钮；其中src是链接图片的路径；name为图片名称；width图片宽度；height图片高度；当按下图像按钮会以name中的值向服务器发送信息；请点击下方图像按钮：

type="hidden"：隐藏域

隐藏域在页面上不显示，用来存储与传递表单的值，当用户提交表单时，隐藏域的内容会一起提交给处理程序；语法为：input type="hidden" name="hidden" value="提交的值"/

type="file"：文件域

用于从本地硬盘中上传文件并提交，语法：﹤input type="file" name="file" /﹥请在下方上传您的文件； HTML5新增input type属性 input type="url"：输入URL字段

input type="tel" name="tel"：用来输入电话号码

type="search"：搜索字符串

语法：input type="search" name="search" 请搜索 →

type="email"：该控件用来输入"email"地址

若用户输入的非email格式，那么在支持HTML5的浏览器中提交该表单时，会提示为不是合法格式；

type="color"：颜色选择器；语法为：﹤input type="color" id="color"﹥

使用color属性能直接调用系统的颜色调节窗口，默然为黑色；请选择颜色 →

type="number"：数字字段

用于输入数字的字段，其中min设定允许的最小值；max设定允许的最大值；value规定默认值；还有step可规定合法数字间隔；请输入数字字段 →

type="range"：输入数值控件；

定义用于精确值不重要的输入数字的控件；min属性指定最小值限制，max属性指定最大值限制，step属性规定合法数字间隔，value属性规定默认值，请选择 →

type="month"：年月控件

语法：input type="month" value="2016-08" value属性用来控制年月；若使用type="week"则为控制(年/周)

type="date"：日期控件

可用来选择或输入日期，包括（年/月/日）不包括时间；其中设定 min 属性控制开始日期，max 属性控制结束日期；请选择日期 → 如果使用type="time" 则用来输入时间，不包括日期。

type="datetime"：日期加时间控件（基于UTC时区）

创建日期时间，包括（年/月/日/时/分/秒/零点几秒） →

type="datetime-local"：日期加时间控件（不带时区）

创建本地日期时间，包括（年/月/日/时/分/秒/零点几秒） →

【本文地址】

公司简介

联系我们