表单蕴含三个根本组成部分:表单标签、表单域、表单按钮。
1,表单标签
HTML 表单用于收集用户输出,表单应用<form>
标签创立。表单可蕴含文本字段、复选框、单选框、提交按钮等等。
留神:<form>
元素是块级元素,其前后会产生折行。
<body> <form > </form></body>
form表单的属性:
action="url"
:申请地址,指定form表单向何处发送数据。name="login"
:作用是给表单起名,为了便于咱们操作。enctype ="string"
:规定在发送表单数据之前,如何对表单数据进行编码。通常在应用文件上传时,咱们会enctype="multipart/form-data",以二进制传输。method ="get/post"
:指定表单以何种形式发送到指定的服务器程序,该属性定义浏览器将表单中的数据提交给服务器处理程序的形式。对于method的取值,最罕用的是get和post。
2,表单域
要提交数据的表单域必须加name属性。不然,该表单域的数据不会提交到服务器上。
<input>
标签
<input>
用于收集用户信息,依据不同的类型显示不同的模式。input是空标签,它没有完结标签,在开始标签中完结。<input>
元素依据不同的type属性,能够变动为多种状态。<input>
元素设置name属性,用于网络申请时提交对应输出的字段。
文本框
定义单行的输出字段,用户可在其中输出文本。它是一个单行文本框,input的默认类型即是text类型。
例:
<form action=""> 用户名:<input name="userName" type="text"></form>
明码框
类型为password时,它用于收集用户输出的明码,在你输出时,浏览器会把输出的内容以符号来代替。
例:
<form action=""> 明码:<input name="pwsname" type="password"></form>
文本框和明码框都能够增加placeholder属性,用于设置输出字段预期值的提示信息。该提醒会在输出字段为空时显示,并会在字段取得焦点时隐没。
单选框
类型为radio时,用于定义单选按钮,name属性值雷同的input单选框只能有一个被选中。
checked="checked"
设置默认选中的单选框。value="1"
是提交到服务器时给后盾程序员们看的。
例:
<form action=""> 性别:男 <input name="sex" checked="checked" type="radio" value="1"> 女 <input name="sex" type="radio" value="2"> </form>
复选框
类型为checkbox时,用于定义复选按钮,复选框容许用户在肯定数目的抉择中选取一个或多个选项。
例:
<form action=""> 兴趣爱好:篮球 <input type="checkbox" name="like1" value="1" checked> 足球 <input type="checkbox" name="like2" value="2"> 游泳 <input type="checkbox" name="like3" value="3"> 跑步 <input type="checkbox" name="like4" value="4"></form>
文件上传
类型为file时,默认为单文件上传。
multiple="multiple"
设置为多文件上传。
例:
<form action=""> <input type="file" name="file" multiple="multiple"></form>
暗藏字段
暗藏字段对于用户是不可见的。暗藏字段通常会存储一个默认值,它们的值也能够由 JavaScript 进行批改。
例:
<form action=""> <input type="hidden" name="hidden" value="123"></form>
下拉列表
<select>
元素定义下拉列表;
<option>
元素定义待抉择的选项;
列表通常会把首个选项显示为被选选项,通过增加 selected 属性来定义预约义选项。
例:
<form action=""> 抉择您喜爱的水果: <select name="select"> <option value="apple">苹果</option> <option value="banana">香蕉</option> <!--榴莲设置为选中状态--> <option selected value="durian">榴莲</option> </select></form>
单选按钮、复选框默认选中用:checked属性。
下拉列表应用:selected属性。
应用size属性设置下拉列表开展,应用multiple属性设置多选。
<form action=""> <select name="select" size="4" multiple id=""> <option value="1">重庆</option> <option value="2">武汉</option> <option value="3">北京</option> <option value="4">上海</option> </select> <input type="submit"></form>
文本域
<textarea>
元素定义多行输出字段(文本域)
cols:规定文本区内的可见宽度。
rows:规定文本区内的可见行数。
<form> <textarea name="text" cols="50" rows="10"></textarea></form>
文本域能够增加placeholder属性,用于设置输出字段预期值的提示信息。
<label>
标签
label是input的形容,它自身不会有特殊效果,但它和其它input标签应用能够晋升用户的应用体验,用户不必非得点击到按钮,而是点击文字即可选中,如“记住明码”。
通过label的for指向按钮的id来绑定,for和id属性的值要雷同。
<form action=""> <label for="userName">请输出用户名:</label> <input type="text" id="userName"></form><form action="login.jsp"> 性别: <label for="man">男:</label> <input type="checkbox" id="man"> <label for="woman">女:</label> <input type="checkbox" id="woman"></form>
3,表单按钮
重置按钮
重置按钮会革除表单中的所有数据。
value="重置"
设置重置按钮上显示的文字。
<form action=""> 用户名:<input name="userName" type="text"> 性别:男 <input name="sex" checked="checked" type="radio" value="1"> 女 <input name="sex" type="radio" value="2"> <input type="reset" value="重置"></form>
提交按钮
type="submit" 定义提交按钮。提交按钮用于向服务器发送表单数据,数据会发送到表单的 action 属性中指定的页面。
value="提交"
设置提交按钮上显示的文字。
<form action=""> 用户名:<input name="userName" type="text"> 性别:男 <input name="sex" checked="checked" type="radio" value="1"> 女 <input name="sex" type="radio" value="2"> <input type="submit" value="提交"></form>
一般按钮
button类型的只是一个一般的按钮,而submit有一个提交的作用,在没有加js代码的状况下,button只是个装璜。
<form action=""> <input type="button" value="按钮"></form>
提交按钮
image类型的input也是具备一个提交的作用,不同的是能够指定一幅图片来作为按钮,不提倡应用image,因为它有时候会提交两次。
<form action=""> <input type="image" src="img/bg.jpg"></form>