一.表单概述
表单是可以把用户输入的数据传输到服务器端的HTML元素,然后在后台处理表单传输过来的数据,用来完成与用户之间的各种交互动作。
在网页上由可输入的表单控件,比如文本输入框、密码输入框、单选按钮、多选按钮等。
表单在网页中主要负责收集数据。
二.表单元素
表单标签是一个双标签,里面包含将数据提交到后台服务器的方法。
<form></form>
2.1.method属性
提交到后台服务器的方法有两种 1.get方法 2.post方法(method属性)
1.get方法
使用HTTP get方法向后台服务器发送表单数据,在提交数据之后,它会将各表单控件的“名称/值”显示在地址栏中。这样处理数据,有很大的不安全性,它有可能会泄露用户的相关信息。
<form method="get"> </form>
2.post方法
使用HTTP post方法向后台服务器发送来自表单的数据,在提交数据后,它不会将相关信息显示在地址栏中。这个方法有利地保护了用户的信息,降低了信息泄露的机率。
<form method="post"> </form>
注意:如果没有使用method属性,默认使用HTTP get方法。
2.2.action属性
action属性的值是一个地址,意思就是当你点击提交按钮后,表单收集到的数据就会传输到该地址,这个地址可以是绝对地址,也可以是相对地址。
<form action="#"> </form>
三.表单输入元素<input>
在表单中,用户输入数据所需要的文本框、密码框、多选按钮、单选按钮等都是通过input元素来创建的。通常input元素会用到的属性有name、value、size、placeholder、required、autofocus等。
可以通过<input>标签的type属性来指定输入控件的类型,type属性的值有很多。
如文本框(text)、密码框(password)、单选按钮(radio)、多选按钮(checkbox)、提交按钮(submit)、重置按钮(reset)等。
name:该属性是一个必要值,如果要正确地被提交,每个输入字段必须设置一个 name 属性。
value:该属性是为文本框提供初始值,用户会在表单加载后看到该值。
size:该属性可以设置文本框的宽度,是以字符为单位的。size的值不影响用户可以输入的字符量。
placeholder:这个是HTML5新增的一个属性,用来为文本框设置输入提示信息。当文本框处于未输入状态且未获取光标焦点时,会模糊的显示placeholder的值。
required:该属性是设置当你提交表单时,若有未填写的信息,会提示用户必须输入内容。
autofocus:该属性是当表单加载后,会自动获取光标焦点。
文本框与密码框
用户名:<input type="text" name="UserName" value=""请输入用户名" size="20" required autofocus>
密码:<input type="password" name="PassWord" value=""请输入密码" size="20" required>
单选按钮和多选按钮
<input type="radio" value="男" name="gender" checked="checked">男
<input type="radio" value="女" name="gender">女
<input type="checkbox" name="like" value="听音乐">听音乐
<input type="checkbox" name="like" value="体育">体育
<input type="checkbox" name="like" value="看书">看书
提交按钮和重置按钮
<input type="submit" value="提交"/>
<input type="reset" value="重置">
四.textarea标签
<textarea> 标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。
<textarea name="name" cols="50" rows="5">这个家伙很懒,什么都没有留下!</textarea>
以上呢就是form表单的基本内容了,想要深入了解的话,可以去W3cshcool在线编程学习哟!