HTML 表单

  HTML表单就是为了收集用户输入信息。由表单标签<form>和表单元素组成。

<form> 元素包含一个或多个如下的表单元素：

• <input> 输入框/单选/复选

• <textarea>文本区域

• <button>按钮

• <select>选择框/下拉列表

• <option>选项

• <optgroup>选项组
  

• <fieldset>分组元素

• <legend>分组标题
  

• <label>相关标记

• <keygen>  该特性已经从 Web 标准中删除

• <datalist> 选项列表

• <output>输出

案例

一下案例列出了所有用户输入的表单元素

<form onchange="ming.value=parseInt(a.value)+parseInt(b.value)">
    input输入框：<input type="text" name="xing" value="张"><br>
    input单选:<input type="radio"  value="男"><br>
    input多选:<input type="checkbox" value="男"><br>
    textarea文本区域：<textarea >输入内容...</textarea><br>
    button按钮：<input type="submit" value="提交"><br>
    select下拉框：<select >
      <option value="PHP" >后端</option>
        <option value="HTML" >前端</option>
        <option value="CSS" >样式</option>
        <option value="JavaScript" >脚本</option>
        <option value="MYSQL">数据库</option>
      </select><br>
      option选项标签：
      <select>
        <option value="PHP" >后端</option>
          <option value="HTML" >前端</option>
          <option value="CSS" >样式</option>
          <option value="JavaScript" >脚本</option>
          <option value="MYSQL">数据库</option>
        </select><br>
        optgroup选项组:
        <select >
          <optgroup label="后端技术">
            <option value="PHP" >后端</option>
            <option value="MYSQL" >数据库</option>
          </optgroup>
          <optgroup label="前端技术">
            <option value="HTML" >前端</option>
            <option value="CSS" >样式</option>
            <option value="JavaScript" selected>脚本</option>
          </optgroup>
          </select><br>
          fieldset和legend分组元素和分组标题:
          <fieldset name="user">
            <legend>用户信息</legend>
            姓氏：<input type="text" value="张"><br>
            名字: <input type="text"value="三"><br>
            </fieldset><br>
            label相关标记：
            <label for="male">男</label>
            <input type="radio"  id="male" value="男"><br>
            
            datalist选项列表:
            <input list="lists"><br>
            <datalist id="lists">
              <option value="PHP">
              <option value="HTML">
              <option value="CSS">
              <option value="JavaScript">
              <option value="MYSQL">
            </datalist>
    output输出:
      <input type="number" id="a" value="50">
      +<input type="number" id="b" value="50">
      =<output name="ming" for="a加b结果"></output>
      
            <p><strong>注意:</strong>  Internet Explorer 不支持 output 标签。</p>
    </form>

运行代码

HTML Form 属性

HTML <form> 元素，已设置所有可能的属性，是这样的：

form表单属性

属性	值	描述
accept	MIME_type	HTML5 不支持。规定服务器接收到的文件的类型。（文件是通过文件上传提交的）
accept-charset	character_set	规定服务器可处理的表单数据字符集。
action	URL	规定当提交表单时向何处发送表单数据。
autocomplete	on off	规定是否启用表单的自动完成功能。
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况）
method	get post	规定用于发送表单数据的 HTTP 方法。
name	text	规定表单的名称。
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证。
target	_blank _self _parent _top framename	规定在何处打开 action URL。