HTML史上最全的<input>属性

网络营销评论45

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


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

  1. name属性 ：元素的名称；这个不需要多解释了，也就是name的取值代表为当前input元素起个名字；

  2. size属性 ：元素的宽度；很多人都知道在HTML中，常见的宽度是用 width 表示的，而在input中 width 属性只使用与 type="image" 时使用，input元素的宽度需要通过size属性来设定，size的值为数字，数字越大input元素越长，数字越小input元素越短；

  3. 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" 一同使用。

  4. maxlength属性：定义input元素中可输入的最长字符数；如 maxlength="50" 表示最多可以输入50个字符；

  5. style属性 ：为input元素设定CSS样式；

  6. width属性 ：当 input type="image"时，通过width属性控制元素的宽度；

  7. height属性：当 input type="image"时，通过width属性控制元素的高度；

input type属性大全

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

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

  2. type="password"：密码输入框

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

  3. type="radio"：单选按钮

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

    男 女 同性恋

  4. type="checkbox"：复选框

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

    广州 深圳 珠海 东莞

  5. type="button"：普通按钮

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

  6. type="submit"：提交按钮

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

  7. type="reset"：重置按钮

    HTML史上最全的<input>属性-图片7重置按钮的作用是点击之后表单会刷新回到默认状态，在value属性中输入的值为按钮上显示的文本；请点击重置 →

  8. type="image"：图像按钮

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

  9. type="hidden"：隐藏域

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

  10. type="file"：文件域

    用于从本地硬盘中上传文件并提交，语法：<input type="file" name="file" />请在下方上传您的文件；



HTML5新增input type属性


  1. input type="url"：输入URL字段

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

  3. type="search"：搜索字符串

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

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

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

  5. type="color"：颜色选择器；语法为：<input type="color" id="color">

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

  6. type="number"：数字字段

    HTML史上最全的<input>属性-图片9用于输入数字的字段，其中min设定允许的最小值；max设定允许的最大值；value规定默认值；还有step可规定合法数字间隔；请输入数字字段 →

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

    HTML史上最全的<input>属性-图片10定义用于精确值不重要的输入数字的控件；min属性指定最小值限制，max属性指定最大值限制，step属性规定合法数字间隔，value属性规定默认值，请选择 →

  8. type="month"：年月控件

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

  9. type="date"：日期控件

    HTML史上最全的<input>属性-图片11可用来选择或输入日期，包括（年/月/日）不包括时间；其中设定 min 属性控制开始日期，max 属性控制结束日期；请选择日期 →如果使用type="time" 则用来输入时间，不包括日期。

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

    HTML史上最全的<input>属性-图片12创建日期时间，包括（年/月/日/时/分/秒/零点几秒） →

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

    HTML史上最全的<input>属性-图片13创建本地日期时间，包括（年/月/日/时/分/秒/零点几秒） →

如果觉得本文对你有帮助，记得扫一扫下方的二维码哦！

HTML史上最全的<input>属性-图片14

 
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: