form表单细节
一、表单
1.表单 标签用于为用户输入创建 HTML 表单
2.表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。
3.表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
4.表单用于向服务器传输数据。
二、表单form 的属性
(一)action属性
action 属性规定当提交表单时,向何处发送表单数据
属性值:url 链接的地址
(二)name属性
name属性规定表单的名称。 name 属性提供了一种在脚本中引用表单的方法。
(三)method属性
method 属性规定在提交表单时所用的HTTP方法(GET 或是 POST)
1、什么时候使用GET?
method属性的默认值是GET,如果表单的提交是被动的(比如搜索引擎查询),并且没有敏感信息;
当使用GET的时候,表单数据是提交到页面的地址栏中的。
2、什么时候使用post?
地址栏中可以储存的数据是有限的,如果想要储存更多数据,更安全的储存数据就需要使用 post
表单正在更新数据,或是包含敏感信息(例如密码)最好使用post;
post 安全性更好,因为在页面地址栏中提交的数据使不可见的(如果上传的数据比较多或是要上传图片,就要使用post)。
(四)legend元素
元素为 元素定义标签
标签 可以将表单内的相关元素分组,还可以在相关表单元素周围绘制边框。<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
</fieldset>
</form>
input元素必须要加上 name 属性,定义一个名字,后台才会正常接收输入的数据;
三、表单描述标签的使用
<label for="wenzi">文字</label>
<input type="text" id='wenz'>
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。
如果在 label 元素内点击文本,就会触发此控件,使该控件获得焦点。当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
为了实现同样的效果,会有另一种写法:不需要 for 和 id 属性;
<label>文字 <input type="text">
</label>
四、表单约束属性
(一)required 属性
required 属性是一个布尔属性,规定必须在提交表单之前填写输入字段,必填字段。(required是H5的新属性)
注意:required 属性适用于下面的 input 类型:text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。
(二)placeholder属性
placeholder 属性规定可描述输入字段预期值的简短的提示信息( 在输入框里面的提示文字,内容不会被提交),例如一个样本值或是预期格式的简短的描述。
placeholder 定义的