表单包含三个基本组成部分:表单标签、表单域、表单按钮。
1,表单标签
HTML 表单用于收集用户输入,表单使用
标签创建。表单可包含文本字段、复选框、单选框、提交按钮等等。注意:
元素是块级元素,其前后会产生折行。form表单的属性:
action="url":请求地址,指定form表单向何处发送数据。
name="login":作用是给表单起名,为了便于我们操作。
enctype ="string":规定在发送表单数据之前,如何对表单数据进行编码。通常在使用文件上传时,我们会enctype="multipart/form-data",以二进制传输。
method ="get/post":指定表单以何种方式发送到指定的服务器程序,该属性定义浏览器将表单中的数据提交给服务器处理程序的方式。关于method的取值,最常用的是get和post。
2,表单域
要提交数据的表单域必须加name属性。不然,该表单域的数据不会提交到服务器上。
标签
用于收集用户信息,根据不同的类型显示不同的形式。input是空标签,它没有结束标签,在开始标签中结束。
元素根据不同的type属性,可以变化为多种形态。
元素设置name属性,用于网络请求时提交对应输入的字段。
文本框
定义单行的输入字段,用户可在其中输入文本。它是一个单行文本框,input的默认类型即是text类型。
例:
用户名:
密码框
类型为password时,它用于收集用户输入的密码,在你输入时,浏览器会把输入的内容以符号来代替。
例:
密码:
文本框和密码框都可以添加placeholder属性,用于设置输入字段预期值的提示信息。该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
单选框
类型为radio时,用于定义单选按钮,name属性值相同的input单选框只能有一个被选中。
checked="checked" 设置默认选中的单选框。
value="1"是提交到服务器时给后台程序员们看的。
例:
性别:男
女
复选框
类型为checkbox时,用于定义复选按钮,复选框允许用户在一定数目的选择中选取一个或多个选项。
例:
兴趣爱好:篮球
足球
游泳
跑步
文件上传
类型为file时,默认为单文件上传。
multiple="multiple" 设置为多文件上传。
例:
隐藏字段
隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值,它们的值也可以由 JavaScript 进行修改。
例:
下拉列表
元素定义下拉列表;
元素定义待选择的选项;
列表通常会把首个选项显示为被选选项,通过添加 selected 属性来定义预定义选项。
例:
选择您喜欢的水果:
苹果
香蕉
榴莲
单选按钮、复选框默认选中用:checked属性。
下拉列表使用:selected属性。
使用size属性设置下拉列表展开,使用multiple属性设置多选。
重庆
武汉
北京
上海
文本域
元素定义多行输入字段(文本域)
cols:规定文本区内的可见宽度。
rows:规定文本区内的可见行数。
文本域可以添加placeholder属性,用于设置输入字段预期值的提示信息。
标签
label是input的描述,它本身不会有特殊效果,但它和其它input标签使用可以提升用户的使用体验,用户不用非得点击到按钮,而是点击文字即可选中,如“记住密码”。
通过label的for指向按钮的id来绑定,for和id属性的值要相同。
请输入用户名:
性别:
男:
女:
3,表单按钮
重置按钮
重置按钮会清除表单中的所有数据。
value="重置"设置重置按钮上显示的文字。
用户名:
性别:男
女
提交按钮
type="submit" 定义提交按钮。提交按钮用于向服务器发送表单数据,数据会发送到表单的 action 属性中指定的页面。
value="提交"设置提交按钮上显示的文字。
用户名:
性别:男
女
普通按钮
button类型的只是一个普通的按钮,而submit有一个提交的作用,在没有加js代码的情况下,button只是个装饰。
提交按钮
image类型的input也是具有一个提交的作用,不同的是可以指定一幅图片来作为按钮,不提倡使用image,因为它有时候会提交两次。
来源:oschina
链接:https://my.oschina.net/u/4867241/blog/4776256