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

前端表格和表单

作者: _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>
    
    表格

    相关文章

      网友评论

          本文标题:前端表格和表单

          本文链接:https://www.haomeiwen.com/subject/ndnxtqtx.html