HTML基础2

表单

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8" ectype="application/x-www-form urlencoded" autocomplete="off" novalidate>

form elements

</form> 

1. Action 属性
   action 属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。通常，表单会被提交到 web 服务器上的网页。
2. Method 属性
   method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
   如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息，使用GET 。使用 GET 时，表单数据在页面地址栏中是可见的，GET 最适合少量数据的提交。浏览器会设定容量限制。
   如果表单正在更新数据，或者包含敏感信息（例如密码），使用POST 。 POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
3. 用 组合表单数据
   <fieldset> 元素组合表单中的相关数据
   <legend> 元素为 <fieldset> 元素定义标题

<form action="action_page.php">
    <fieldset>
    <legend>Personal information:</legend>
        First name:<br>
        <input type="text" name="firstname" value="Mickey">
        <br>
        Last name:<br>
        <input type="text" name="lastname" value="Mouse">
        <br><br>
        <input type="submit" value="Submit"></fieldset>
</form> 

4. 表单元素
<input> 元素

<input type="text">  定义供文本输入的单行输入字段
<input type="password"> 定义密码字段
<input type="submit"> 定义提交表单数据至表单处理程序的
                      按钮在表单的 action 属性中规定
                      表单处理程序（form-handler）
<input type="radio"  value="male" checked>Male  定义单选按钮
<input type="checkbox"> 定义复选框
<input type="button> 定义按钮
<input type="date"> 用于日期输入
<input type="color"> 用于颜色输入
<input type="range"> 用于一定范围内的值的输入，显示为滑块控件
<input type="month"> 允许用户选择月份和年份
<input type="week"> 允许用户选择周和年
<input type="time"> 允许用户选择时间（无时区）
<input type="datetime"> 允许用户选择日期和时间（有时区）
<input type="datetime-local"> 允许用户选择日期和时间（无时区）
<input type="email"> 用于应该包含电子邮件地址的输入字段

<select>元素（下拉列表）

    <select name="cars">
        <option value="volvo" selected>Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>

<textarea>元素:定义多行输入字段（文本域）

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

<button> 元素

    <button type="button" onclick="alert('Hello World!')">
        Click Me!
    </button>

HTML5 <datalist> 元素:为<input> 元素规定预定义选项列表。用户会在他们输入数据时看到预定义选项的下拉列表。<input>元素的 list 属性必须引用<datalist>元素的 id 属性。

    <form action="action_page.php">
        <input list="browsers">
            <datalist id="browsers">
               <option value="Internet Explorer">
               <option value="Firefox">
               <option value="Chrome">
               <option value="Opera">
               <option value="Safari">
            </datalist> 
    </form>

5. 输入限制

<form>
  Quantity:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>