HTML5中的常用表单元素使用例子

最新推荐文章于 2021-07-08 22:52:27 发布

「已注销」

最新推荐文章于 2021-07-08 22:52:27 发布

阅读量311

点赞数

分类专栏：前端文章标签： Html5

原文链接：https://www.mk2048.com/blog/blog.php?id=jiabacbjb&title=HTML5%E4%B8%AD%E7%9A%84%E5%B8%B8%E7%94%A8%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0%E4%BD%BF%E7%94%A8%E4%BE%8B%E5%AD%90

版权

前端专栏收录该内容

1143 篇文章 3 订阅

订阅专栏

1、form - 表单
element/form/form.html

<!doctype html>
<html>
<head>
    <title>form</title>
</head>
<body>

    <!--
        form - 表单，用于提交子元素数据到服务端
          accept-charset - 指定提交数据的编码格式
          action - 提交的目标地址
          autocomplete - 是否对所有子元素启用自动完成功能（on 或 off）
          enctype - 编码类型（application/x-www-form-urlencoded 或 multipart/form-data 或 text/plain）
          method - form 的 method（默认是 GET）
          name - form 的 name
          novalidate - 提交时是否不需要验证，boolean 类型
          target - form 的 target
    -->

    <form action="#">
        <input type="text" name="txt" value="webabcd" />
        <input type="submit" name="btn" value="submit" />
    </form>

</body>
</html>

2、label - 关联其它元素
element/form/label.html

<!doctype html>
<html>
<head>
    <title>label</title>
</head>
<body>

    <!--
        label - 关联其它元素
          form - 指定 label 所属的表单，多个用空格分开
          for - 关联元素的 id

        DOM
          form, htmlFor
          control - 返回 label 所关联的元素
    -->

    <label><input type="checkbox" /> checkbox title</label>

    <br />

    <input id="chk" type="checkbox" />
    <label id="lbl" for="chk">checkbox title</label>

    <script type="text/javascript">
        var lbl = document.getElementById("lbl");
        alert(document.getElementById("lbl").htmlFor);
        alert(document.getElementById("lbl").control.outerHTML);
    </script>
</body>
</html>

3、button - 按钮元素
element/form/button.html

<!doctype html>
<html>
<head>
    <title>button</title>
</head>
<body>

    <!--
        button - 按钮元素
          autofocus - 页面加载后是否自动置为焦点，boolean 类型
          disabled - 是否无效，boolean 类型
          form - 指定关联的 form 的 id
          formaction - 指定关联 form 的 action
          formenctype - 指定关联 form 的编码类型
          formmethod - 指定关联 form 的 method
          formnovalidate - 指定关联 form 在提交时是否不需要验证，boolean 类型
          formtarget - 指定关联 form 的 target
          type - 按钮类型（button 或 submit 或 reset）
    -->
    
    <button type="button">button</button>

</body>
</html>

4、select - 下拉列表框元素, option - 选项, optgroup - 选项组
element/form/select_option_optgroup.html

<!doctype html>
<html>
<head>
    <title>select option optgroup</title>
</head>
<body>
    <!--
        select - 下拉列表框元素
          autofocus, disabled, form, name, required, size
          multiple - 是否可多选，boolean 类型

        option - 选项
          disabled, label, selected, value

        optgroup - 选项组
          disabled, label
    -->

    <select>
        <option value="1" label="aaa" />
        <option value="2" label="bbb" />
        <option value="3" label="ccc" selected />
        <option value="4" label="ddd" />
        <option value="5" label="eee" />
    </select>

    <select multiple>
        <option value="1">aaa</option>
        <option value="2">bbb </option>
        <option value="3" selected>ccc</option>
        <option value="4" selected>ddd</option>
        <option value="5">eee </option>
    </select>

    <select>
        <optgroup label="optgroup 1">
            <option value="1">aaa</option>
            <option value="2">bbb </option>
        </optgroup>
        <optgroup label="optgroup 2">
            <option value="3">ccc</option>
            <option value="4">ddd </option>
        </optgroup>
        <optgroup label="optgroup 3">
            <option value="5" selected>eee</option>
            <option value="6">fff </option>
        </optgroup>
    </select>
</body>
</html>

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5中的常用表单元素使用例子

1、form - 表单 element/form/form.html <!doctype html> <html> <head> <title>form</title> </head> <bo...
复制链接

扫一扫