美文网首页
前端表格和表单

前端表格和表单

作者: _Clown_ | 来源:发表于2018-10-24 19:35 被阅读0次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <style type="text/css">
        
    </style>
</head>
<body>
    <form action="file:///D:/前端/前端日记/第八天/1.html">
        <fieldset>
            <!-- value="我是value" -->
            <label for="um">用户名</label>
            <input id="um" type="text" name="username" 
            placeholder="请输入6-8位数字">
            <br><br>
            <label for="pwd">密码</label>
            <input  id="pwd" type="password" name="password"
            placeholder="请输入密码">
        </fieldset>
        <br><br>
        <fieldset>
            性别<input type="radio" name="gender" value="male">男
            <input type="radio" name="gender" value="female">女
            <br><br>
            爱好<input type="checkbox" name="hobby" value="zq">足球
            爱好<input type="checkbox" name="hobby" value="lq">篮球
            爱好<input type="checkbox" name="hobby" value="pq">排球
        </fieldset>
        <br><br>
        你喜欢的明星
        <!-- multiple="multiple" -->
        <select name="star">
            <optgroup label="男明星">
                <option value="lyf">刘亦菲</option>
                <option value="bb">baby</option>
            </optgroup>
            <optgroup label="女明星">
                <option value="xzm" selected="selected">小泽玛利亚</option>
                <option value="xzm" selected="selected">赵丽颖</option>
                <option value="xzm" selected="selected">邓超</option>
                <option value="xzm" selected="selected">王嘉尔</option>
            </optgroup>
        </select>
        <br><br>
        自我介绍<textarea name="info"></textarea>
        <br><br>
        <input type="submit" value="注册">
        <input type="reset">
        <input type="button" name="按钮">
        <br><br>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">按钮</button>
    </form>
</body>
</html>
表单
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style type="text/css">
        table{
            width: 300px;
            margin: 0 auto;
            /*border: 1px solid black;*/
            /*border-spacing: 0px;*/
            border-collapse: collapse;
        }
        td{
            border: 1px solid black;
        }
        /*tr:nth-child(odd){
            background-color: #bfa;
        }*/
        tbody>tr:nth-child(even){
            background-color: #bfa;
        }
        tr:hover{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <table border="1px width=40%">
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr><tr>
            <td>1</td>
            <td>老王</td>
            <td>男</td>
            <td>12</td>
        </tr><tr>
            <td>2</td>
            <td>老孙</td>
            <td>女</td>
            <td>13</td>
        </tr><tr>
            <td>3</td>
            <td>老李</td>
            <td>男</td>
            <td>14</td>
            
            <!-- <td colspan="2">D4</td> -->
        </tr>
    </table>
</body>
</html>
表格

相关文章