关于HTML表单见解

这是一篇简单的HTML表单from功能的编写

form标签

form标签是表单的外壳，form有四个主要的属性。

form标签的主要属性：

1. action用于表单的提交地址；
2. method用于表示表单提交的方法，提交表单主要是get和post两种方法：
   • get将数据拼接起来显示在URL上用于传输到指定的地址（常用于向后台发起请求，例如传输一个文件名请求服务器向你发送该文件）;
   • post将数据包裹起来传输到指定地址，不会显示在 URL 上（常用于向服务器传输文件，向服务器传输安全性要求高的文件等）;
   • 主要区别在于：方式问题，安全性问题，数据量问题;
   • get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；
   • 在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式;
3. target用与在何处打开action（较少使用）；
4. 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中修改其样式。