《使用HTML5实现响应式布局》第三章-HTML5表单-理论学习资料.pptxVIP

第三章HTML5表单

理论内容表单控件表单验证

1.表单表单标签form是HTML5的一个重要组成部分，主要用于采集和提交用户输入的信息服务器表单提交反馈

表单form标签通常结合两个属性使用：action和method。action指明了处理表单信息的目标地址。method表示发送表单信息的方式，也可称为网页传值方式。其有两个属性值：get和post。get的方式是将表单控件的信息经过编码后，通过URL发送到目标地址，可以在地址栏中看到长串的数据，这是get方式的传值内容。而post则将表单的内容通过http协议封装后发送，在地址栏看不到表单的提交信息。通常，如果仅为取得和显示数据，则使用get传值；而一旦涉及数据的保存和更新，建议用post传值。

2.控件HTML5表单可以包含各种网页控件，这些网页控件帮助用户输入文字信息，或从选项中选择数据，以及完成提交操作的页面组件密码框文本框下拉框单选钮图片按钮提交按钮复选框

表单HTML5表单常用控件的标签见下表表单控件标签写法说明inputtype=text单行文本输入框。使用的是input标签和type属性。inputtype=submit将表单中的信息提交给表单中action属性所指向的地址inputtype=checkbox复选框inputtype=radio单选钮inputtype=password密码输入框（输入的文字用*表示）select下拉框textArea多行文本输入框

文本框单行文本输入框允许用户输入一些简短的单行信息bodyformaction=/smethod=get请输入你查找的内容：inputtype=textname=wdinputtype=submitvalue=提交到Baidu搜索/form/body表单文本框将内容发送到百度搜索

密码框密码输入框主要用于一些保密信息的输入，如密码。因为用户输入时，显示的不是输入的内容，而是“*”符号form请输入你的姓名：inputtype=textname=yourname请输入你的密码：inputtype=passwordname=yourpwinputtype=submitvalue=提交/form密码框

复选框复选框允许用户在一组选项中，选择多个数据forminputtype=checkboxname=fruitvalue=apple苹果inputtype=checkboxname=fruitvalue=orange桔子inputtype=checkboxname=fruitvalue=mango芒果inputtype=submitvalue=提交/form复选框

单选钮使用单选钮，用户在一组选项中只能选择一个数据。forminputtype=radioname=fruitvalue=Apple苹果inputtype=radioname=fruitvalue=Orange桔子inputtype=radioname=fruitvalue=Mango芒果inputtype=submitvalue=提交/form单选钮

下拉框下拉框的标签是select，它既可以用于单选，也可用于复选formselectname=fruitoptionvalue=apple苹果/optionoptionvalue=orange桔子/optionoptionvalue=mango芒果/option/selectinputtype=submitvalue=提交/form下拉框下拉选项

多行文本框多行文本框的标签是textarea，它用于输入较长的文本信息form请提宝贵意见：textareaname=suggestcols=50rows=3/textareainputtype=submitvalue=提交/form多行文本框cols属性设置textarea的宽度，rows属性设置textarea的高度

图片按钮显示图片的提交按钮form输入商品编号：inputtype=textname=yournameinputtype=imagesrc=buy.