6.1.3Input元素及属性--1a精品课件.pptxVIP

Input元素及属性03 6.3 Input元素及属性input /元素是表单中最常见的元素，网页中常见的单行文本框、单选按钮、复选框等都是通过它定义的。在HTML5中，input /标记拥有多种输入类型及相关属性。本节将对input元素的相关属性进行讲解。 6.3 Input元素及属性属性属性值描述typetext单行文本输入框password密码输入框radio单选按钮checkbox复选框button普通按钮submit提交按钮reset重置按钮image图像形式的提交按钮hidden隐藏域file文件域emaile-mail地址的输入域urlURL地址的输入域number数值的输入域range一定范围内数字值的输入域Date pickers (date, month, week, time, datetime, datetime-local)日期和时间的输入类型search搜索域color颜色输入类型?tel电话号码输入类型 6.3 Input元素及属性name由用户自定义控件的名称value由用户自定义input控件中的默认文本值size正整数input控件在页面中的显示宽度readonlyreadonly该控件内容为只读（不能编辑修改）disableddisabled第一次加载页面时禁用该控件（显示为灰色）checkedchecked定义选择控件默认被选中的项maxlength正整数控件允许输入的最多字符数autocompleteon/off设定是否自动完成表单字段内容autofocusautofocus指定页面加载后是否自动获取焦点form?form元素的id设定字段隶属于哪一个或多个表单listdatalist元素的id指定字段的候选数据值列表multiplemultiple指定输入框是否可以选择多个值min、max和step 数值规定输入框所允许的最大值、最小值及间隔pattern字符串验证输入的内容是否与定义的正则表达式匹配placeholder字符串为input类型的输入框提供一种提示requiredrequired规定输入框填写的内容不能为空属性属性值描述 6.3 Input元素及属性掌握input元素的多个type属性值的不同作用，能够定义不同的控件类型。学习目标1. Input元素的type属性 6.3 Input元素及属性1. Input元素的type属性在HTML5中，input元素拥有多个type属性值，用于定义不同的控件类型。单行文本输入框input type=text /单行文本输入框常用来输入简短的信息，如用户名、账号、证件号码等，常用的属性有name、value、maxlength。input type=text value=张三 maxlength=6 / 6.3 Input元素及属性1. Input元素的type属性在HTML5中，input元素拥有多个type属性值，用于定义不同的控件类型。密码输入框input type=password /密码输入框用来输入密码，其内容将以圆点的形式显示。input type=password size=40 / 6.3 Input元素及属性1. Input元素的type属性在HTML5中，input元素拥有多个type属性值，用于定义不同的控件类型。单选按钮input type=radio /单选按钮用于单项选择，如选择性别、是否操作等。input type=radio name=sex checked=checked /男 6.3 Input元素及属性1. Input元素的type属性在HTML5中，input元素拥有多个type属性值，用于定义不同的控件类型。复选框input type=checkbox /复选框常用于多项选择，如选择兴趣、爱好等，可对其应用checked属性，指定默认选中项。input type=checkbox /唱歌 6.3 Input元素及属性1. Input元素的type属性在HTML5中，input元素拥有多个type属性值，用于定义不同的控件类型。普通按钮input type=button /普通按钮常常配合javascript脚本语言使用，读者了解即可。input type=button value=普通按钮 / 6.3 Input元素及属性1. Input元素的type属性在HTML5中，input元素拥有多个type属性值，用于定义不同的控件类型。提交按钮input type=submit /提交按钮是表单中的核心控件，用户完成信息的输入后，一般都需要单击提交按钮才能完成表单数据的提交。input type=submit / 6.3 Input元素及属性1. Input元素的type属性在HTML5中