Form表单

form表单有什么作用、有哪些常用的input 标签，分别有什么作用

• form标签是表单的外壳，用于把用户输入的数据提交到后台
• 常见的input标签

标签	含义
<input type="text" name="firstname">	创建文本域text
<input type="text" name="user">	创建password
<input type="checkbox" name="Bike">	复选框checkbox
<input type="radio" checked="checked" name="Sex" value="male" />	单选按钮radio

post 和 get 方式的区别

• 最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。
• GET被强制服务器支持
• GET请求发送数据更小
• POST请求不能被缓存
• POST请求相对GET请求较安全

在input里，name 有什么作用

• 作为可与服务器交互数据的HTML元素的服务器端的标示
• HTML元素Input type='radio'分组，我们知道radio button控件在同一个分组类，check操作是mutex的，同一时间只能选中一个radio，这个分组就是根据相同的Name属性来实现的
• 建立页面中的锚点，我们知道<a href="URL">link</a>是获得一个页面超级链接，如果不用href属性，而改用Name
• 某些特定元素的属性

radio 如何分组

• 设置name属性，相同的为一组

placeholder 属性有什么作用

• placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
  该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
  placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password

type=hidden隐藏域有什么作用、 举例说明

• 隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器
• 举例：获取用户当前的浏览器版本/系统的版本等

HTML 表单的用法

• 所有的HTML表单都从一个<form>元素开始

<form action="/my-handling-form-page" method="post">

</form>

• 该action属性定义了在提交表单时收集的数据应发送的位置（URL）

• 该method属性定义使用哪种HTTP方法发送数据（可以是“get”或“post”）

• input 元素

type属性	类型描述
text	常规文本输入。可用value属性定义默认值。可用 placeholder属性提示用户输入
hidden	隐藏字段，不会显示
submit	提交表单时，此提示不会被提交
password	密码输入，字符输入后自动隐藏。可用 placeholder属性提升用示输入，submit提交表单时，此提示不会被提交
checkbox	复选框输入（多个选项中可选择多个选项）。同一组数据，对应的name属性相同，每个选项的值由value属性定义
radio	单选按钮输入（多个选项中选择一个选项）。同一组数据，对应的name属性相同，每个选项的值由value属性定义
file	选择文件。可选择的文件类型由accept属性定义
reset	重置用户输入
button	显示按钮，不能用于提交表单
submit	提交按钮（提交表单）

• select元素

定义下拉列表，<option> 元素定义待选择的选项。
列表通常会把首个选项显示为被选选项。也可以通过添加 selected 属性来定义预定义选项

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

• textarea元素

定义多行输入字段（文本域），通过 cols 和 rows 属性来规定 textarea 的尺寸大小

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

• label元素

<label>元素用来提示<input>、<select>、<textarea>等输入元素表头，可用for属性与属入元素id相关联，帮助输入元素聚焦鼠标输入

<input type="radio" name="sex" value="male" id="male"><label for="male">男</label>
<input type="radio" name="sex" value="female" id="female"><label for="female">女</label>