《客户端应用程序开发》课件——项目四表单开发.pptxVIP

《客户端应用程序开发》课件——项目四表单开发.pptx

登录表单

整个表单居中显示。邮箱账号和密码行的高度为30px，宽度自定“登录”和“去注册”按钮的高度为40px、宽度为100px。分别设置“登录”按钮的背景色和鼠标悬停时的背景色；设置“去注册”按钮的背景色；当鼠标悬停时，鼠标形状变为手型。单击登录按钮，跳转到网易首页，单击去注册按钮，跳转到注册页面教学任务

单行文本框inputtype=textname=#size=#maxlength=#value=#placeholder=#

密码框inputtype=passwordname=#size=#maxlength=#value=#

按钮submit：提交按钮，单击提交按钮，会跳转到action指定的表单处理程序reset：重置按钮，单击或清空表单中已经填写的信息button：普通按钮，一般需要通过设置onclick事件指定单击动作inputtype=submit|reset|buttonname=#value=#

注册表单

单选按钮和复选框inputtype=“radio|checkbox”value=“值”name=“名称”checked=“checked”只能选一项可以选多项Value：Checked：是传递给表单处理程序的值当设置checked=“checked”属性时，该选项被选中

单选按钮和复选框

下拉列表框selectoption选项1/optionoptionselected=“selected”选项2/option/selectselected：Select=“selected”被选择的那一项

下拉列表框

文本域textareaname=“”cols=“行数”rows=“列数输入提示信息/textarea

Label标签labelfor=“username”用户名：/labelinputtype=“text”name=“username”id=“username”/label标签为表单元素定义标注for属性可以把label绑定到另一个元素label标签的for属性应当与相关表单元素的id属性相同

小结inuttype=“”textpasswordsubmitresetradiocheckboxselectoptiontextarealabel

消费调查表单

fieldsetfieldsetfieldsetfieldsetlegend消费调查表单

formfieldsetlegendPersonalia:/legendName:inputtype=textbrEmail:inputtype=textbrDateofbirth:inputtype=text/fieldset/form表单分组fieldset和legend

fieldset：标签可以将表单内的相关元素分组,标签会在相关表单元素周围绘制边框。legend：为fieldset元素定义标题。表单分组fieldset和legend

formfieldsetlegend健康信息/legend身高：inputtype=text/体重：inputtype=text//fieldset/form表单分组示例

放录屏

小结

HTML5的form新属性：autocompletenovalidateHTML5的input新属性：autocompleteautofocuspattern(regexp)placeholderrequired……小结