输入

<input>

概述 Overview

. 应用最广泛的表单元素 - the most powerful and complex

. 种类 type 很多，默认是 text，单行文本输入

. 更多 <input> 类型和使用，请访问 MDN - <input>、更多 <input>

<input type = "text" name = "" id = "">

常用属性
类别	说明
type	input 类型，如：单选 radio、多选 checkbox 等
name	提交时，由后端区别不同类型元素的值；还可以对元素分类，如一组单选按钮
value	值
id	多用于 JavaScript 控制；或配合 <label> 使用，增强用户体验
maxlength	最大字符数
placeholder	内容占位符，显示提示信息
checked	是否选中；selected 表示 select 的默认选中
required	必填字段；否则会把空的当成有效字符
hidden	隐藏
disabled	是否可用；普通元素不具备该特性
autocomplete	提示历史输入，方便自动完成，一般配合 datalist
autofocus	自动获取焦点
pattern	利用正则表达式提供验证功能，如："\d{6}"；请参考正则表达式

常用类型 - 普通类
属性	说明
text	单行文本输入；默认类型
password	密码输入
radio	单选按钮；多个选一个；使用 name 属性分组；应显式指定 value
checkbox	多选按钮；使用 name 属性分组；应显式指定 value
submit	数据提交按钮；建议使用专门的按钮标签 <button>
reset	数据复位按钮；建议使用专门的按钮标签 <button>

radio本意是只无线电，为什么用做单选？

常用类型 - 应用类
属性	说明
file	文件选择按钮，请参考 file
image	图片
number	数值，如身高、体重；min max step
search	搜索框；语义化
range	指定数值范围选择，如音量选择
color	颜色选择

常用类型 - 验证类
属性	说明
email	电子邮件
url	网址
tel	电话；适用于移动端

常用类型 - 日期类
属性	说明
date	日期
month	年月
time	时分秒
week	星期

初始化 Init

. 通常根据 type 修改特定的表单元素；若无特别说明，后续均做初始化处理

. 更多样式，请参考后续内容

[] 单行输入文本框的初始化 - 使用 CSS变量更加方便维护

:root{
  accent-color: #ff1493;
}

::placeholder {
  color: #089;
} 

::selection {
  color: #fff;
  background-color: #ff1493;
}

input[type=text] {
  width: 100%;
  border: none;
  outline: none;
  font: inherit;
  box-sizing: border-box;
  background-color: transparent;
}

单行文本 text

[] 自定义text样式

:focus

::selection

::placeholder

后期利用定位把提示信息和占位符结合起来使用，请参考一"鹿"有你

单选 radio