HTML 标签大全-2.表单

乐地课堂

已于 2023-06-11 00:47:04 修改

阅读量42

点赞数

分类专栏：前端开发 HTML 文章标签： html html5

于 2023-05-31 16:07:40 首次发布

本文链接：https://blog.csdn.net/dhldhl/article/details/130971224

版权

前端开发同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

HTML 标签大全

表单

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

代码示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代码示例</title>
</head>
<body>
  <!-- form 定义一个 HTML 表单，用于用户输入。 -->
  <form action="demo-form.php" method="post">

    input 允许用户输入数据。改变type 值实现不同的用途 
    账号: <input type="text" name="Name" value=""><br>
    密码: <input type="password" name="password" value=""><br>
    <input type="submit" value="提交"><br>
    <hr>

    一个 textarea 文本区域：<br>
    <textarea rows="10" cols="30">
      我是一个文本框。
      </textarea>
      <hr>

      一个button按钮：<br>
     <button type="button">点我!</button>

     <hr>
     创建带select选择列表：<br>
    <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>        
    </select>
    <hr>

    通过 optgroup标签把相关的选项组合在一起：<br>
      <select>
        <optgroup label="Swedish Cars">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
        </optgroup>
        <optgroup label="German Cars">
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </optgroup>
      </select>
      <hr>

      创建带有 4 个选项的选择列表：<br>

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

    label信息提示：<br>   
    <label for="male">Male</label>
    <hr>

    fieldset对表单中的相关元素进行分组，legend定义主题：<br>
    <fieldset>
      <legend>Personalia:</legend>
      Name: <input type="text"><br>
      Email: <input type="text"><br>
      Date of birth: <input type="text">
    </fieldset>
    <hr>

    datalist中描述 input元素可能的值：<br>
      <input list="browsers">
      <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
      </datalist>     
    </form>
    <hr> 
    将计算结果显示在output 元素中：<br>
    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
      <input type="range" id="a" value="50">100
      +<input type="number" id="b" value="50">
      =<output name="x" for="a b"></output>
    </form> 
 
</body>
</html>