【input】关于input 元素的type类型及相关作用

传统类型:

  1. text:用于输入单行文本。
<input type="text" name="username">
  1. password:用于输入密码,输入的内容会被隐藏。
<input type="password" name="password">
  1. checkbox:用于选择一个或多个选项。

复选框,允许用户从给定数目的选择中选一个或多个选项,同一组选项按钮,name值一定要一致
value属性中的值用来设置用户选中该项目后提交到数据库中的值;name为控件的名称

<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="music"> 音乐
<input type="checkbox" name="hobby" value="sports"> 运动
  1. radio:用于选择一个选项。

单选按钮,允许用户从给定数目的选择中选一个选项,同一组选项按钮,name值一定要一致

<input type="radio" name="gender" value="male"><input type="radio" name="gender" value="female">
  1. submit:用于提交表单数据。
<input type="submit" value="提交">
  1. reset:用于重置表单数据。
<input type="reset" value="重置">
  1. button:用于创建一个按钮。

普通按钮,定义可点击的按钮,但没有任何行为,常用于用户点击时调用JavaScript方法

<input type="button" value="喜欢请点个赞吧" name="btn" onClick=""  />

H5新增类型:

  1. email:用于输入电子邮件地址。

外观上与type="text"的input输入类型没有差异,在手机端会唤出英文键盘

<input type="email" name="email">
  1. number:用于输入数值。
<input type="number" name="age">
  1. date:用于选择日期。
<input type="date" name="birthday">
  1. color:用于选择颜色。
<input type="color" name="color">
  1. range:用于选择范围内的值。
<input type="range" name="volume" min="0" max="100">
  1. file:用于选择文件。
<input type="file" name="file">
  1. search:用于搜索。
<input type="search" name="search">
  1. tel:用于输入电话号码。
<input type="tel" name="phone">
  1. url:用于输入网址。
<input type="url" name="website">
  1. datetime:用于选择日期和时间。
<input type="datetime" name="datetime">
  1. month:用于选择年份和月份。
<input type="month" name="month">
  1. week:用于选择年份和周数。
<input type="week" name="week">
  1. time:用于选择时间。
<input type="time" name="time">
  1. datetime-local:用于选择日期和本地时间。
<input type="datetime-local" name="datetime-local">
  1. hidden:用于隐藏输入字段。

隐藏域,定义隐藏输入类型用于在表单中增加对用户不可见,但需要提交的额外数据时,disabled属性无法与type="hidden"的input元素一起使用

<input type="hidden" name="hidden" value="hidden value">

以上所有类型的效果图:

【input】关于input 元素的type类型及相关作用_第1张图片

【input】关于input 元素的type类型及相关作用_第2张图片

你可能感兴趣的:(网站开发,javascript,前端)