HTML 表单用于收集不同类型的用户输入。

html表单标签

<form>    定义一个 HTML 表单，用于用户输入。
<input>    定义一个输入控件
<textarea>    定义多行的文本输入控件。
<button>    定义按钮。
<select>    定义选择列表（下拉列表）。
<optgroup>    定义选择列表中相关选项的组合。
<option>    定义选择列表中的选项。
<label>        定义 input 元素的标注。
<fieldset>    定义围绕表单中元素的边框。
<legend>    定义 fieldset 元素的标题。
<datalist>  规定了 input 元素可能的选项列表。

实例

form

<form action="demo_form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>

input

<<form action="/">
     <fieldset>
         <legend>基本信息</legend>
         <label>用户名:</label><input type="text" name="text" value=""/>
         &nbsp;&nbsp;&nbsp;&nbsp;
         <label>密  码:</label><input type="password" name="password" value=""/><br/><br/>

         <label>性别:</label>
         <input type="radio" id="radio" name="radio" value="1" checked="checked"/>男
         <input type="radio" id="radio" name="radio" value="2"/>女
         &nbsp;&nbsp;&nbsp;&nbsp;
         <label>上传头像:</label>
         <input type="file" id="file" value="0"><br/><br/>

         <label>兴趣爱好:</label>
         <input type="checkbox" name="checkbox" value="1" checked="checked"/>运动
         <input type="checkbox" name="checkbox" value="2"/>读书
         &nbsp;&nbsp;&nbsp;&nbsp;
         <label>email:</label>
         <input type="email" name="email"><br/><br/>

         <label>手机号:</label>
         <input type="tel" name="tel">
         &nbsp;&nbsp;&nbsp;&nbsp;
         <label>url:</label>
         <input type="url" name="url"><br/><br/>

         <label>喜欢的颜色</label>
         <input type="color" id="color" value="#ffc600">
         &nbsp;&nbsp;&nbsp;&nbsp;
         <label>评分</label>
         <input type="range" id="range" min="0" max="100" value="0"><br/>

     </fieldset>


     <fieldset>
         <legend>日期时间相关</legend>
         <label>日期:</label><input type="date" id="date" value="0">
         &nbsp;&nbsp;&nbsp;&nbsp;
         <label>月份:</label><input type="month" name="month"><br/><br/>

         <label>  周:</label><input type="week" name="week">
         &nbsp;&nbsp;&nbsp;&nbsp;
         <label>时间:</label><input type="time" id="time" value="0"><br/><br/>

         <label>日期时间:</label><input type="datetime-local" id="datetime-local" value="0"><br/>
     </fieldset>

     <fieldset>
         <legend>其他</legend>
         <label>数字:</label><input type="number" name="number" min="1" max="5" style="width: 60px;">
         &nbsp;&nbsp;&nbsp;&nbsp;
         <label>搜索:</label><input type="search" name="search" style="width: 200px;"><br/><br/>

         <label>按钮:</label><input type="button" onclick="alert('Hello World!')" value="Click Me!">
         &nbsp;&nbsp;&nbsp;&nbsp;
         <label>进度条:</label><progress value="22" max="100"></progress>
     </fieldset>


     <fieldset>
         <legend>提交/重置</legend>
         <input type="submit" value="提交"/>
         &nbsp;&nbsp;&nbsp;&nbsp;
         <input type="reset" value="重置">
     </fieldset>

 </form>

textarea

<textarea  rows="5" cols="100"></textarea>

button

<button type="button">Click Me!</button>

select

<select>
        <option value ="volvo" selected="selected">Volvo</option>
        <option value ="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
    </select>

fieldset

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

datalist

<input list="cars" />
<datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
</datalist>