HTML表单的简单用法:
HTML表单用于搜集不同类型的用户输入。<form>元素定义HTML表单。HTML表单包含表单元素。表单元素指的是不同类型的input元素、复选框、单选按钮、提交按钮等等。
<input>元素是最重要的表单元素。<input>元素有很多形态,根据不同的type属性,创建不同的对象。
1. form表单有什么作用?有哪些常用的input 标签,分别有什么作用?
- 表单是一个包含表单元素的区域,允许用户在表单中(文本域,下拉域,单选框,复选框等等)输入信息的元素;用于搜集不同类型的用户输入,然后提交给网站后台。
- <input type='' name=''>
name:表单提交到后台的key,后台接收的信息为key-value对;
type,类型,常见type:
text/username:文本框,用于输入文本,单行输入
password:输入内容自动变成原点,用于密码输入
checkbox:复选框,允许用户在一定数目的选择中选取一个或多个选项。
button:可点击的按钮,但没有任何行为,常用于在用户点击是启动JS程序。
hidden:隐藏地段,对于用户不可见,通常储存一个默认值,用于识别身份。
image:图像形式的提交按钮
radio:单选按钮,允许用户选取给定数目的选择中的一个选项。
reset:重置按钮,会清除表单中的所有数据。
submit:提交按钮,用于向服务器发送表单数据,发送到form元素的action属性指定的页面。
textarea:多行文本输入域
file:文件上传
select:下拉列表
2. post 和 get 方式的区别?
- get用于信息获取,会把要提交的数据拼装成URL,提交的数据信息可见。一般用于提交少量数据,浏览器限制最多提交1k。get提交的数据会被缓存,被保存在浏览器的历史记录中不安全。如果想在表单之外调用服务器端的应用程序而且包括向其传递参数的过程,就要采用GET方法,因为get允许把表单这样的参数包括进来作为URL的一部分,还能有一个来自浏览器额外的传输过程。
- post用于向服务器传送数据,是可能修改服务器上的资源的请求。提交的数据不是URL,内容不可见,可提交大量数据,数据大小受服务器限制,不受浏览器限制。
3. 在input里,name 有什么作用?
name 属性规定input元素的名称,只有设置了name属性的表单元素才能在提交表单是被服务器接收;input在checkbox,radio类型中,name一致时代表选项为一组。
4. radio 如何 分组?
通过name属性分组,所有name属性相同的radio在使用时只有一个会被选中。即同一组单选按钮,name取值一定要一致,才会起到单选的作用。
5. placeholder 属性有什么作用?
提供可描述字段预期值的提示信息,该提示会在输入字段为空时显示,并会在字段focus时消失。
6. type=hidden隐藏域有什么作用? 举例说明
- 隐藏域在页面中是不可见的,用于收集或发送信息,以利于被处理表单的应用所使用。在表单被提交的桑畅,隐藏域的信息也被一起发送到服务器。
- 隐藏域还可以用于确认用户身份,如 sessionkey等。只有当服务器接收到的hidden与预埋在页面的信息一致时,才能成功提交表单数据。
<input type=‘hidden’ name='hid' value='test'> 此时input元素用户不可见,但提交表单时,隐藏值已提交后台