输入

<input>

Introduction

. 应用最广泛的表单元素 - 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	星期

Initialization

. 通常使用属性选择器根据不同的 type 修改特定的表单元素

. 若无特别说明，后续均做初始化处理

[] 类型 text 和 password 的初始化

. 常规属性的初始化

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

. 其它属性的初始化

:root{
  accent-color: #ff1493;
}

::placeholder {
  color: #089;
} 

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

Usage

单行文本 text

[] 定制 text

. 选择器：:focus、::selection、::placeholder

单选 radio

[] 利用 accent-color，简单粗暴

[] 定制 radio - 利用选中伪类选择器 :checked、相邻兄弟选择器 + ，必要时隐藏 <input>，配合 <label> 和定位 position，借助文字、图片、字体图标等设计元素实现

多选 checkbox

[] 利用 accent-color，简单粗暴

[] 定制 checkbox - 思路同 radio

是一个替换元素（replaced element），其内部结构是由浏览器控制的，不允许通过这些伪元素进行自定义

部分系统要求表单元素不能单独使用，必须用在<form>中；还有某些元素如密码，必须指定 autocomplete属性，请注意查看控制台提示信息，如：

xxx field is not contained in a form

Input elements should have autocomplete attributes

Summary & Homework

Summary: <input> 的常见分类和基本使用

<input> 样式的设计

初步使用伪类选择器、伪元素选择器和组合选择器

初步使用 CSS 函数和 CSS 变量
Homework: [] 表单登录、表单登录; [] 表单注册; [] 留言板、留言板; [] 一"鹿"有你、一"鹿"有你; [] 表单登录和注册、表单登录和注册-简化版; [] Taobao; [] Xiaomi