导航

HTML入门03-表单

Posted on 2019-12-30 15:12  C_BJ  阅读(158)  评论(0)    收藏  举报

input有很多类型，这些类型由input标签的type属性决定。

type值可以为：text、password、radio、checkbox、submi、button，对应的组件也就分别 变成了文本输入（限1行）、密码输入、单选按钮、复选框、提交按钮、普通按钮。

下拉框由select标签和option标签构成。

文本框（没有行数、字数限制）不需要放入表单form中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML表单</title>
</head>
<body>
    <h4>
        表单用于收集不同类型用户的输出,所有内容放入标签form中
    <ul>
        <li><a href="#Text">文本</a></li>
        <li><a href="#Selection">选择</a></li>
        <li><a href="#Form">表单</a> </li>
    </ul></h4>
    <h5>无论文本还是选择都属于input标签，不同的是type属性值（文本框不在表单中）</h5>
    <div id="Text">
        <h3>文本</h3>
        示例：
        <form>
            文本域：<input type="text">
            <br>密码字段：<input type="password">
        </form>
        <ul>
            <li>input标签能输入文字的两种类型：文本、密码</li>
            <li>属性type用来控制类型（text:文本;password:密码字段）</li>
        </ul>
        <textarea>文本框没有字数限制，也不在form内</textarea>
    </div>
    <div id="Selection">
        <h3>选择</h3>
        示例：
        <form>
            <input type="radio" name="RB">单选按钮01
            <input type="radio" name="RB">单选按钮02
            <br>
            <h6>相同name属性的单选按钮只能被选中一个</h6>
            <input type="checkbox" name="CB">复选框01
            <input type="checkbox" name="CB">复选框02
            <br><br>
            <input type="submit">
            <h6>提交按钮，点击后会进行form中action属性值内容，数据也会传送</h6>
            <input type="button" value="button">
            <h6>普通按钮，按钮上显示的文字由属性value控制</h6>
            <br>
            <select>
                <option vaule="1">下拉选项01</option>
                <option vaule="2">下拉选项02</option>
                <option vaule="3" selected>下拉选项03</option>
            </select>
            <h6>如果下拉列表有预选项，给预选项对应的option标签添加selected属性</h6>
        </form>
    </div>
    <div id="Form">
        <h3>表单</h3>
        <ul>
            <li>
                <fieldset style="width: 100px">
                    <legend>带框表单</legend>
                </fieldset>
                <h6>fieldset标签内套legend标签，前者为框，后者为框上文字</h6>
            </li>
            <li>action和method属性</li>
        </ul>
    </div>
</body>
</html>