HTML里不为人知的秘密(02)之常见元素属性使用

HTML里不为人知的秘密(02)之常见元素属性使用

01) 表单元素分组

　　fieldset  legend 表单元素分组

<form>
    <fieldset style="width: 30px;">
        <legend>个人信息</legend>
        姓名：<input type="text" /> <br>
        年龄：<input type="text" />
    </fieldset>
</form>

02) label 和 radio 配合

　   label 和 input 中  radio 配合使用,让文字可以点击

<div>
    <input type="radio" id="foo" name="drone" value="foo"
           checked>
    <label for="foo">foo</label>
</div>

<div>
    <input type="radio" id="bar" name="drone" value="bar">
    <label for="bar">bar</label>
</div>

<div>
    <input type="radio" id="hello" name="drone" value="hello">
    <label for="hello">hello</label>
</div>

03) onSubmit 用于表单校验

<form method="post" action="./demo.php" onSubmit="return true"></form>

<form method="post" action="./demo.php" onSubmit=" onSubmit="return check()""></form>

<form method="post" action="./demo.php" onSubmit="return check()">
    <input type="text" name="usename"/>
    <input type="text" name="password"/>
    <button type="reset">重置</button>
    <button type="submit">Submit</button>
</form>
<script>
    var check = function () {
        return false; // 返回 true 或者 false 可以作为表单校验
        // return true; //
    }
</script>