关于HTML表单见解
这是一篇简单的HTML表单from功能的编写
form标签
form标签是表单的外壳，form有四个主要的属性。
form标签的主要属性：
- action用于表单的提交地址；
- method用于表示表单提交的方法，提交表单主要是get和post两种方法：
- get将数据拼接起来显示在URL上用于传输到指定的地址（常用于向后台发起请求，例如传输一个文件名请求服务器向你发送该文件）;
- post将数据包裹起来传输到指定地址，不会显示在 URL 上（常用于向服务器传输文件，向服务器传输安全性要求高的文件等）;
- 主要区别在于：方式问题，安全性问题，数据量问题;
- get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；
- 在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式;
- target用与在何处打开action（较少使用）；
- enctype用于上传文件的编码方式，上传音频/视频的时候必须使用：
- application/x-www-form-urlencoded：在发送前编码所有字符（默认）
- text/plain:空格转换为"+"加号，但不对特殊字符编码
- multipart/form-data:使用包含文件上传控件的表单时，必须使用该值。
<form action="/abc" method="GET" target=" " enctype=" "></form>
label标签
label标签表为单控件定义标签；
<label for="usename">姓名：</label>
input标签
input标签标签规定用户可输入数据的输入字段。
type属性
- input标签根据不同的 type 属性，输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等
- type属性常用的值有：
- text值用于规定输入的字段是文本字段；
<input id="usename"type= "text" name="usename" placeholder="请输入用户名" >- password值规定输入的字段是文本字段，但将输入内容改为圆点展示；
<input id="passwword"type="password" name="password" placeholder="请输入密码">- checkbox值规定输入字段为复选框；
<input type="checkbox" name="hooby" value="dota">dota- radio值规定输入字段为单选框,使用时name必须相同；
<input type="radio" name="sex" value="男">男- file值规定输入字段为文件，用于文件上传；
<input type="image" name="file">- image值规定输入字段为图片，用于图片的上传（一般和图片上传不在同一表单同时使用）；
<input type="image" name="image">- button值规定为基本提交按钮；
<input type="button" value="提交">- submit值规定为一次性提交按钮，防止多次点击按钮导致多次提交表单；
<input type="submit" value="Submit">- reset值规定为清空表单按钮；
<input type="reset" value="清空">- hidden值用于暂存一些信息，在上传时与服务器校准，可以防止CSRF攻击。
<input type="hidden" name="abcd" value="123456">
name属性：
name属性规定 input元素的名称。name属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。只有设置了 name 属性的表单元素才能在提交表单时传递它们的值，换句话说就是除了按钮，input标签都需要name属性。name属性可以用于建立锚点，但用户按下TAB键时，自动跳转到锚点输入框；
<input id="usename"type= "text" name="usename" placeholder="请输入用户名" >
value属性：
- 对于按钮：规定按钮上的文本
- 对于图像按钮：传递到脚本的字段的符号结果
- 对于复选框和单选按钮：定义 input 元素被点击时的结果。
- 对于隐藏、密码和文本字段：规定元素的默认值。
- 对于 type="checkbox" 以及 type="radio"，是必需的。
- 不能与 type="file" 一同使用。
placeholder属性
placeholder属性用于输入提示。
<input id="usename"type= "text" name="usename" placeholder="请输入用户名" >
select 标签
- select标签是一种表单控件，可用于在表单中接受用户输入。
option标签
- option 标签定义下拉列表中的一个选项（一个条目）。浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。option 元素位于 select 元素内部。、
<div class="select">
<label for="select">居住城市</label>
<select name="city">
<option value="moren">请选择</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzheng">深圳</option>
</select>
</div>
teaxtarea标签
- textarea标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
- 注释：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。
- 提示：可以通过 <textarea> 标签的 wrap 属性设置文本输入区内的换行模式
<div class="textrea">
<label for="textarea">备注：</label>
<textarea name="textarea" id="lch">
ddd
</textarea>
<input type="hidden" name="abcd" value="123456">
</div>
- 注释：大型文本输入的value可以写在如图ddd的位置，可在css中修改其样式。
