表单的用法
HTML表单是通过`<form></form>`标签来定义的,只有包含在标签内的信息才是会被提交到服务器的,`<form></form>`标签可以包含以下子标签
标签名 | 作用 |
---|---|
<input> |
用来声明允许用户输入数据的 input 控件,类型有type决定 |
<textarea> |
定义了一个多行文本输入框,默认可以输入无限制的的字符长度(相对input标签type = text来说) |
<select> |
用来创建下拉菜单,直接子元素<option></option> 用来设置下拉的选项 |
<optgroup> |
作为<slect></slect> 的直接子元素可以把相关的选项组合在一起,label 属性为选项组描述这个选项组 |
<fieldset> |
作为<form></form> 标签的直接子元素,可以将相关的表单选项圈在一起 |
<label> |
点击该元素可以出发控件,将它的for 属性与对应的<input></input> 元素的id 属性对应起来即可 |
form表单的作用,常用的input标签,及其作用?
HTML的form表单主要是用于收集提交不同类型的用户输入
input标签type | 作用 |
---|---|
text | 默认值,用于输入一段单行文本,默认大小为20个字符 |
password | 用于输入密码,浏览器会自动将输入的内容转为小圆点或小星号隐藏起来 |
radio | 单选框,注意同一个单选框的name属性应该是一致的 |
checkbox | 复选框 |
file | 用于上传文件,会自动出现文件长传按钮 |
submmit | 用于提交数据 |
button | 定义了一个可以点击的按钮,注意不能提交数据,可以和javascript连用做其他效果 |
reset | 清空输入,恢复初始的默认值 |
hidden | 隐藏的输入框,用户不可见,但是其中的值会被提交,可以用于一些安全识别的信息,或是定位信息 |
post 和 get 方式的区别
- get是默认值,将表单数据(form-data)以名称/值对的形式附加到 URL中
url?name=value&name=value
。该信息在URL中是可见的,长度限制约为3000个字符长度,适用于一些非安全的信息如Baidu查询搜索等。 - post,以 HTTP post 事务的形式发送表单数据(form-data),数据不显示在URL中,并且没有长度限制。
在input里,name的作用
name属性设置了<input></input>
元素的名称,只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
<input></input>
元素type = radio时,如何进行分组
当`type = radio`时,表示的是一个单选框,通过属性`name`的值设置来实现分组,同一组选项的属性`name`值应该是一致的。
placeholder
属性的作用
<input></input>
的属性placeholder
的作用是用来填写输入框的默认信息,该信息在用户输入时自动消失,也不会被提交到服务器。
type=hidden
隐藏域有什么作用
<input></input>
元素的属性type = hidden
时,该字段在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。有些时候我们要给用户一信息,让他在提交表单时提交上来以确定用户身份,如sessionkey,等等.当然这些东西也能用cookie实现,但使用隐藏域就简单的多了.而且不会有浏览器不支持,用户禁用cookie的烦恼。