HTML教程 HTML教程HTML是什么HTML 代码编辑器HTML 基础标签HTML 元素HTML 属性HTML 标题HTML 段落HTML 文本格式化HTML CSSHTML 头部HTML链接HTML 图像HTML 区块和行内元素HTML 表格HTML 列表HTML 引用和定义元素HTML 计算机代码元素HTML 布局HTML 框架HTML 脚本/JavaScriptHTML 文件路径HTML 颜色HTML 字符(编码)和实体HTML URL(网址)HTML XHTMLHTML - Web服务器HTML表单 HTML 表单HTML 表单属性HTML 表单元素HTML 表单input类型HTML 表单input属性

HTML 表单元素

本章节会详细说明表单目前全部元素。一个HTML表单是由一个或者多个元素构造而成的。

HTML表单元素:

全部表单元素案例

1631589710640097.png

<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>

运行代码

select元素案例

新建有五个项目的下拉列表

<select name="ming">
<option value="PHP" >后端</option>
  <option value="HTML" >前端</option>
  <option value="CSS" >样式</option>
  <option value="JavaScript" >脚本</option>
  <option value="MYSQL">数据库</option>
</select>

运行代码

option元素案例

本案例建了一个有五个项目的下拉框

1566199323956682.png

<input list="lists" name="ming">
<datalist id="lists">
  <option value="PHP">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
  <option value="MYSQL">
</datalist>

运行代码

input元素案例

本案例定义了两个输入字段,一个提交按钮

姓氏:<input type="text" name="xing" value="张">
名字: <input type="text" name="ming" value="三">
<input type="submit" value="提交">

运行代码

textarea元素案例

多行文本输入框

textarea标签

<textarea name="ming">输入内容...</textarea>

多行文本

button元素案例

本案例建了两个按钮

button

<button name="ming" type="submit" value="HTML">HTML教程</button>
<button name="ming" type="submit" value="php">PHP教程</button>

运行代码

label元素案例

本案例设置了两个单选按钮的两个相关标识

label标签

<label for="male">男</label>
<input type="radio" name="ming" id="male" value="男"><br>
<label for="female">女</label>
<input type="radio" name="ming" id="female" value="女"><br>

运行代码

optgroup元素案例

本案例建了两组的项目下拉框

<select name="ming">
<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>

选项分组

fieldset和legend元素案例

本案例对姓氏和名字两个相关元素分为用户信息组

<fieldset name="user">
<legend>用户信息</legend>
姓氏:<input type="text" name="xing" value="张"><br>
名字: <input type="text" name="ming" value="三"><br>
</fieldset>

分组标签

datalist元素案例

本案例建了一个可输入的下拉框

1566652716605973.png

<input list="lists" name="ming">
<datalist id="lists">
  <option value="PHP">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
  <option value="MYSQL">
</datalist>

运行代码

output元素案例

如果第一个输入框为"51"第二个输入框为"50",则输出位显示"101"

output for属性

<form onchange="ming.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="50">
+<input type="number" id="b" value="50">
=<output name="ming" for="a加b结果"></output>
</form>

运行代码