表单form的简单使用

HTML表单

• 介绍：表单是一个包含表单元素的区域，表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等）输入信息的元素。

• 作用：表单是用于搜集不同类型的用户输入。
  如图：

  
  
  Paste_Image.png

表单标签

Paste_Image.png

一、form标签

form标签作用：

   包裹住所有的input输入，生成完整数据，提交给后台地址。

form标签的属性：

1. action属性：表单提交后跳转的地址
2. method属性：表单向服务器的提交方式，有两种get和post：
   • get：把表单所有的请求数据拼接成Key=value的形式组装到url上提交给后台，这种方式会使所有请求数据都在跳转的url上看到，安全性不好，而且如果请求数据过多，超出url的字符限制，会导致请求数据丢失。
   • post：请求数据不会拼接到url，是直接把数据提交给后台，这种方式安全性较高，只要请求数据不超出服务器容量就可以。

**两种请求方式的应用场景：**
    若是向服务器要数据且安全性要求不高的请求用get方法,若是向服务器提交大量数据或者安全性要求很高的用post方法。

二、input标签

input标签是放在<form></form>之间的，是用户输入数据储存域，是非闭合标签 。它最主要的两个属性是：name和type。
主要格式：<input type=" " name="  ">
type属性说明数据存储的类型，name属性用于区分同一表单中的其它数据储存域。

input标签的用法：

  1. 单行文本框：<input type="text" name="username" size="20" maxlength="10">
      type=“text”，表示是文字输入，默认值；size代表文本输入框长度；maxlength代表最多输入字节数。
  2. 密码输入框：<input type="password" name="password">
      type="password"，输入的数据会自动变成圆点
  3. 单选按钮：<input type="radio" name="sex" value="男">
              <input type="radio" name="sex" value="女" checked>
      type="radio"，用于有互斥选择的时候。checked是默认选项
        注意：单选按钮靠name属性分组，name值相同的是一组，同组内方可进行单选;
             value值必须填写,不然数据提交给服务器,只能看到值是on,获取不到提交的内容。
  4. 复选框:<input type="checkbox" name="discipline" value="shuxue">
      type="checkbox"，用于有多个选择的时候.
        注意:复选框也是按照name属性分组，提交到后端的时被选中的value是以,分割的一个字符串，通过name属性获得。
  5. 文件选择框:<input type="file" name="myfile" accept="image/png">
      type="file"，用于上传文件。
  6. 按钮：<input type="button" name="button" value="确定">
  7. 重置按钮：<input type="reset" name="reset" value="重置">
     点击该按钮会清空表单内填写的信息，回到初始状态
  8. 提交按钮：<input type="submit" name="submit" value="提交">
  9. 隐藏域：<input type="hidden" name="hidden_file" value="sgdfhhjddgd">
       type="hidden"，该属性储存的数据用户看不到，可用于安全校验。

三、label标签：

   label标签一般用于展示元素标题，不会呈现任何效果，和其相对应的input无关。
   标签加上for属性，当鼠标移动到展示的内容上时，就能触发和标签相关的input输入框，这样的用法需和相关元素的id配合，即for属性值和id属性值一致：
     <label for="密码">密码：</label>
     <input type="password" name="password" id="密码" placeholder="请输入密码">

四、select标签和option标签：

  是下拉菜单组合标签，有selected属性用来设置默认选项：
  <select name="time">
  <option value="早上">早上</option>
  <option value="下午">下午</option>
  <option value="晚上"  selected>晚上</option>

五、textera标签：

   多行文本域，是闭合标签，可以直接在标签里添加文字，文本框大小可鼠标拖动。
     <textarea name="备注">Happy day.....</textarea>

六、button标签：

1. ** <button>标签与 <input type="button"> 的不同之处是:**标签之间的所有内容都是按钮的内容，可包含文本或多媒体。
2. ** 注意：**标签之间的内容唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
3. ** <button> 标签的 disabled 属性：**
   <button type="button" disabled="disabled">Click Me!</button>
   disabled 属性规定禁用按钮，被禁用的按钮既不可用，也不可点击。

动手写的简单的form表单

Paste_Image.png