HTML(5)表单元素以及对各个表单元素的name、value属

我在学习表单元素的时候感觉很混乱，特别是 name value这两个属性，没有真正理解它们是干什么的，所以需要梳理一下。

HTML表单元素主要有 <form> <input> <select> <textarea> <button> <fieldset> <legend>
HTML5新增的表单元素有三个<datalist> <keygen> <output>

下面梳理一下这些表单元素的用法并指出各元素的name、value属性含义

1. <form>元素

<form>元素定义HTML表单，收集用户输入。

属性主要有 action和method；

action定义在提交表单时执行的动作，向服务器提交表单的通常做法是使用提交按钮（type为submit的<input>元素）；如果省略该属性，则action会被设置为当前页面。

method属性规定在提交表单时所用的HTTP方法（HTTP方法有GET和POST两种，这里只说一下两者的主要区别：GET方法会使表单数据在页面地址栏是可见的，而POST方法不可见，所以POST方法安全性更佳）。

<form action="action_page.php" method="get">
    form elements...
</form>

2. <input>元素

<input>元素很常用（为行内元素，在“去哪儿”找实习面试的时候被问到过，当时都答错......），根据不同的type属性，可以变化为多种形态。

type的取值有text radio checkbox password submit button;HTML5又新增了type类型email url search number range color date pickers（date month week...），这些新类型提供了更好的输入控制和验证。

对于<input>元素，除了type属性，常用的就是name和value属性：
name属性----想要被正确地提交，每个输入字段必须设置一个name属性。
value属性----为<input>元素设定值，对于不同的type，value属性的含义也不同。

type="submit"、"button"、"reset"    ——定义按钮上显示的文本
type="text"、"password"、"hidden"   ——定义输入字段的初始值
type="radio"、"checkbox"、"image"   ——定义与输入相关联的值
type="file"                        ——无法与value属性一起使用

这里只具体介绍type为radio checkbox的<input>元素。

• radio定义单选钮，允许用户在有限数量的选项中选择一个。

<form action="action_page.php" method="get">
     <fieldset>     <!--<fieldset>元素用于组合表单中相关数据；<legend>元素用于为<fieldset>元素定义标题-->
          <legend>你喜欢谁？</legend><br>
          <input type="radio" name="star" value="杨洋">杨洋<br>
          <input type="radio" name="star" value="许嵩">许嵩<br>
          <input type="radio" name="star" value="吴彦祖">吴彦祖<br>
          <input type="submit">
      </fieldset>
</form>

效果图如下

当选择“许嵩”，点击“提交”按钮后，看到页面地址栏里表单数据的内容如下图所示。

注意：单选钮的各个name属性值要完全一致，否则会不只选中一个选项

• checkbox是复选框，允许用户在有限数量的选项中选择零个或多个选项。

<form action="" method="get">
     <fieldset>
          <legend>你喜欢谁？</legend><br>
          <input type="checkbox" name="star" value="杨洋">杨洋<br>
          <input type="checkbox" name="star" value="许嵩">许嵩<br>
          <input type="checkbox" name="star" value="吴彦祖">吴彦祖<br>
          <input type="submit">
     </fieldset>
</form>

效果图如下

当我全选时（好像暴露了什么），name和value值表现如下

3. <select>元素- -下拉列表

定义下拉列表，需要配合<option>使用，<option>定义待选择的选项；通常会把首个选项显示为被选选项；可通过selected属性来定义预定义选项。

<form action="action_page.php" method="get">
      <select name="fruits">
            <option value="apple">apple</apple>
            <option value="pineapple">pineapple</apple>
            <option value="mango">mango</apple>
            <option value="grape">grape</apple>
       </select>
       <input type="submit">
</form>

效果图如下：

打开下拉列表，选择"mango"这一项，并点击"提交"按钮，因为method设置为了get，所以在地址栏中可看到数据：分别取自<select>中的name属性值和被选项的value属性值。

当value的属性值是空的时候，会取<option>的内容值作为表单数据提交。

4. <textarea>元素

定义多行输入字段（文本域）

<form action="action_page.php" method="get">
       <textarea name="msg" rows="10" cols="30">Just Do It!</textarea>
       <input type="submit">
</form>

效果如下图

地址栏数据如下图所示。当文本域为空时，提交的表单数据也为空；改变文本域的值，再次提交，则表单数据也会相应的改变。

5. <button>元素

<button>元素的type属性有三个可能的值button submit和reset；这里只介绍属性值button

type为button时，定义可点击的按钮

<form action="action_page.php" method="get">
    <button type="button" onclick="alert('How are you  doing?')">click</button>
</form>

效果如下图

点击后出现

6. <datalist>元素

规定输入域的选项列表；需要配合<option>元素一起使用，该元素定义列表项；如需把datalist绑定到输入域，需要把输入域的list属性值设置为datalist的id值；<option>元素必须要设置value属性。

<form action="action_page.php" method="get">
        <input type="url" name="website" list="url_list">
        <datalist id="url_list">
            <option value="http://www.baidu.com"></option>
            <option value="http://www.google.com"></option>
            <option value="http://www.jianshu.com"></option>
            <option value="http://www.w3cschool.com"></option>
        </datalist>
        <input type="submit">
</form>

效果图如下

当选择第三项，并点击"提交"按钮后，地址栏数据如下

7. <keygen>元素

提供一种验证用户的可靠方法。

<keygen>元素是密钥对生成器（key-pair generator）。当提交表单时会生成两个键，一个是公钥，一个是私钥。私钥存储于客户端，公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。

目前浏览器对该元素糟糕的支持程度不足以使其成为有用的安全标准。

<form action="" method="get">
     <keygen name="security"></keygen>
     <input type="submit">
 </form>

效果图如下

点击第一项并提交后，地址栏的数据为

file:///C:/Users/wxf/Desktop/imooc/home/test4.html?security=MIICQDCCASgwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQCiOHLvFmlmZKNDwqFZ8ie7mSP%2FmRRVSxhgtvH3ORHEoAl63sO9mZWVEPs8ZrcgCLW5z1TFGs9hadvhL%2BafxUs%2FN6lXYWDpoM7juZLuRDbK%2BdF4WAMWDbgX3NzK5fj2t2J5oMiLaBh8slUUByCAENCktHXeEBCs%2BuaFqxZN%2B458BBTz%2Fg%2BYoQ5AUj3jv0lzfwUZ46xxd2yUyUVYpnYy8PMUQMwV4vZ2hNQEzM%2BW7HKHkBDTD8OQFDwmSuizLq5DO34x%2BInnvS9lpiJOkUHCUdciYITtLS2lw45JZnjkuJdeWGSwXmBdboBix99u6jZ6NGEtTQ2Pb%2BqNQFeutzLzrEEpAgMBAAEWADANBgkqhkiG9w0BAQQFAAOCAQEAHe4OWmRmaxhQxUPQnwY9W8kWwMMtEKZJ%2B28qVmZILOiBUJWYDiEXo2VJy9fUUuOL7gdrlc1exPNRMOIQSK2n221foHJ%2BKWmecnZ9jVwWr46eHASrrRKUHDANePwDxrUQ0bxr26vdcpGPZBFlvqf5RehkATlrYtt3Aij9txjzE%2FNss4d%2BL%2BtAOyY4KdgHRTjmn8HdA9%2BDgflroHyQ8frO3jvprojyDX3Jhko5o6XxScXJDKX3QO51PLOPcVsJLBElU8QPKZybO9GpCuj36TvX74CxP22wtsGkuRAGeqOyjjyyGBmKio83b1HudL6KEh31T2xyntk6STyqO%2FlxEdIRpQ%3D%3D

8. <output>元素

用于不同类型的输出，如计算或脚本输出。

<form action="action_page.php" method="get" oninput="resCalc()">
        <input type="Number" id="num_a" value="3"> +1
        <input type="range" id="num_b" value="4" min="1" max="10">10 =
        <output id="result" ></output>
</form>
<script type="text/javascript">
    function resCalc(){
            numA=document.getElementById("num_a").value;
            numB=document.getElementById("num_b").value;
            document.getElementById("result").value=Number(numA)+Number(numB);      
    }           
</script>

效果如下图

通过总结对这些元素的认识更加深刻了，所以要经常整理！