输入

Introduction

• 应用最广泛的表单元素 - the most powerful and complex
• 种类 type 很多，默认是 text，单行文本输入
• 更多 <input> 类型和使用，请访问 MDN - <input>、更多 <input>

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

常用属性

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

常用类型 - 普通类

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

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

常用类型 - 应用类

item	desc
file	文件选择按钮，请参考 file
image	图片
number	数值，如身高、体重；min max step
search	搜索框；语义化
range	指定数值范围选择，如音量选择
color	颜色选择

常用类型 - 验证类

item	desc
email	电子邮件
url	网址
tel	电话；适用于移动端

常用类型 - 日期类

item	desc
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;
}

单行文本 text

• 定制 text
• 选择器：:focus、::selection、::placeholder

单选 radio

• 利用 accent-color，简单粗暴

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

多选 checkbox

• 利用 accent-color，简单粗暴

• 定制 checkbox - 思路同 radio

Summary

• <input> 的常见分类和基本使用
• <input> 样式的设计
• 初步使用伪类选择器、伪元素选择器和组合选择器
• 初步使用 CSS 函数和 CSS 变量

Homework