工业UI开发技术-课件 2-1-7 HTML表单-2.pptxVIP

HTML表单深圳市信息职业技术学院

HTML表单交互组件01目录02HTML表单选择组件

本节目标 本任务需要了解的HTML内容包括：HTML的概念，发展历程。需要掌握的是HTML文本相关标签，列表，图片，多媒体，表格，表单标签以及行级与块级标签的分类。通过本节学习可以：了解HTML发展历程。掌握HTML常用标签。掌握常用标签的常用属性。

02HTML表单选择组件

HTML表单formaction=method=get复选框： inputtype=checkboxname=checkboxid=checkboxchecked=checked/ inputtype=checkboxname=checkboxid=checkbox2/ inputtype=checkboxname=checkboxid=checkbox3/brbr单选按钮： inputtype=radioname=sexchecked男 inputtype=radioname=sex女/form

HTML表单formaction=method=get下拉菜单：selectname=selectid=selectoptionvalue=1UI设计/optionoptionvalue=2前端工程师/optionoptionvalue=3网站美工/option/select列表：selectname=select2size=3id=select2optionvalue=1北京/optionoptionvalue=2上海/optionoptionvalue=3广州/option/select/form

属性readonlyreadonly属性规定输入字段为只读,但其value值仍会被表单提交readonly属性只针对text、password和textarea有效disableddisabled属性规定禁用该表单元素，其value值不会被表单提交disabled属性对所有表单元素均有效，包括select,radio,checkbox,button等使用disabled属性后表单元素背景会变成灰色

HTML中FROM表单inputtype标签名注释标签名注释text文本date日期password密文域datetime日期时间(不能使用)radio单选域datetime-local本地日期实践checkbox多选域month月image图像按钮域week周submit提交按钮time时间reset重置按钮url网址button按钮email邮箱file文件域range范围hidden隐藏域number数字search有哪些信誉好的足球投注网站域color拾色器

HTML表单注意事项HTML5以前每个表单元素都必须放在form标记内部。action属性规定当提交表单时，向何处发送表单数据。注意区分input的type属性注意同一组单选按钮的名称设置注意checked属性selected属性注意区分单标签，双标签注意区分块元素，行内元素

THANKYOU深圳市信息职业技术学院