input元素及属性（上）.pptxVIP

input元素及属性（上）

学习目标掌握input元素及属性的使用能够准确定义不同的表单控件

重点难点重点input元素及属性的使用难点input元素的type属性取值

属性属性值描述typetext单行文本输入框password密码输入框radio单选按钮checkbox复选框button普通按钮submit提交按钮reset重置按钮image图像形式的提交按钮hidden隐藏域file文件域HTML5中新增的属性email、url、number、range、Datepickers(date,month,week,time,datetime,datetime-local)、search、color、tele-mail地址的输入域、URL地址的输入域、数值的输入域、一定范围内数字值的输入域、日期和时间的输入类型、搜索域、颜色输入类型、电话号码输入类型input元素input/元素是表单中最常见的元素，也是最重要的元素。网页中常见的单行文本框、单选按钮、复选框等都是通过它定义的。输入类型是由类型属性（type）定义的。

input元素input元素除了type属性外，还有其他一些属性来设置表单控件的信息。属性属性值描述name由用户自定义控件的名称value由用户自定义input控件中的默认文本值size正整数input控件在页面中的显示宽度readonlyreadonly该控件内容为只读（不能编辑修改）disableddisabled第一次加载页面时禁用该控件（显示为灰色）checkedchecked定义选择控件默认被选中的项maxlength正整数控件允许输入的最多字符数autocompleteon/off设定是否自动完成表单字段内容

input元素的type属性单行文本输入框。type=“text”，常用来输入简短的信息，如用户名、账号、证件号码等，常用的属性有name、value、maxlength。密码输入框。type=“password”。用来输入密码，其内容将以圆点的形式显示。

input元素的type属性单选按钮，type=radio，用于单项选择，如选择性别、是否操作等复选框，type=checkbox，常用于多项选择，如选择兴趣、爱好等，可对其应用checked属性，指定默认选中项。

input元素的type属性提交按钮，type=submit，是表单中的核心控件，用户完成信息的输入后，一般都需要单击提交按钮才能完成表单数据的提交。重置按钮，type=reset，当用户输入的信息有误时，可单击重置按钮取消已输入的所有表单信息。可以对其应用value属性，改变重置按钮上的默认文本。

input元素的type属性普通按钮，type=button，常常配合javascript脚本语言使用。图像形式的提交按钮，type=image，与普通的提交按钮在功能上基本相同，只是它用图像替代了默认的按钮，外观上更加美观。

input元素的type属性文件域，type=file，当定义文件域时，页面中将出现一个文本框和一个“浏览...”按钮，用户可以通过填写文件路径或直接选择文件的方式，将文件提交给后台服务器。隐藏域，type=hidden，对于用户是不可见的，通常用于后台的程序，这里了解即可。

input元素的type属性邮箱类型，type=email，用来验证email输入框的内容是否符合Email邮件地址格式；如果不符合，将提示相应的错误信息。url类型，type=url，是一种用于输入URL地址的文本框。

input元素的type属性tel类型，type=tel，用于提供输入电话号码的文本框，由于电话号码的格式千差万别，很难实现一个通用的格式。因此，tel类型通常会和pattern属性配合使用。search类型，type=search，是一种专门用于输入搜索关键词的文本框，它能自动记录一些字符。在用户输入内容后，其右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。

input元素的type属性color类型，type=color，用于提供设置颜色的文本框，用于实现一个RGB颜色输入。其基本形式是#RRGGBB，默认值为#000000，通过value属性值可以更改默认颜色。

input元素的type属性number类型的input元素，type=number用于提供输入数值的文本框。在提交表单时，会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内，则会出现错误提示。range类型的input元素，type=“range，用于提供一定范围内数值的输入范围，在网页中显示为滑动条。它的常用属性与number类型一样。

案例练习制作“中国传统文化”问卷调查网页

课后思考