html表单制作

252 阅读1分钟

image.png


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table tr {
            height: 30px;
        }
    </style>
</head>
<body>
    <form method="get">
        <table>
            <tr>
                <td>
                       <label>请输入邮箱地址</label>
                </td>
                <td>
                     <input type="email" name="email" placeholder="这是一个文本输入框"> 
                   
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    邮箱地址请按要求格式输入
                </td>
            </tr>
            <tr>
                <td>
                      <label>请输入密码</label>
                </td>
                <td>
                       <input type="password" name="password" placeholder="这是一个文本输入框">
                </td>
            </tr>
            <tr>
                <td>
                      <label>请重新输入密码</label>
                </td>
                <td>
                    <input type="password" name="password" placeholder="这是一个文本输入框">
                </td>
            </tr>
            <tr>
                <td> </td>
                <td>
                    密码请问6~16位英文数字
                </td>
            </tr>
            <tr>
                <td>
                    <label>性别</label>
                </td>
                <td>
                    <input type="radio" name="sex" value="男" id="boy" checked><label for="boy"></label>&nbsp;&nbsp;
                    <input type="radio" name="sex" value="女" id="girl"><label for="girl"></label>
                </td>
            </tr>
            <tr>
                <td>
                    <label>城市</label>
                </td>
                <td>
                    <select name="city">
                        <option value="GuangZhou" selected>广州</option>
                        <option value="WUHan">武汉</option>
                        <option value="ShangHai">上海</option>
                        <option value="BeiJing">北京</option>
                        <option value="ShenZhen">深圳</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <label>爱好</label>
                </td>
                <td>
                    <input type="checkbox" name="hobby" value="sport" id="sport"><label for="sport">运动</label>
                    <input type="checkbox" name="hobby" value="art" id="art"><label for="art">艺术</label>
                    <input type="checkbox" name="hobby" value="science" id="science"><label for="science">科学</label>
                </td>
            </tr>
            <tr>
                <td>
                    <label>个人描述</label>
                </td>
                <td>
                    <textarea name="describe" placeholder="这是一个多行输入框,输入您的个人描述" cols="35" rows="5"></textarea>
                </td>
            </tr>
            <tr>
                <td> </td>
                <td>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="submit" value="确认提交">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>