HTML5和CSS3开发第三章课后作业

1,用HTML5实现申请表表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>申请表</title>
</head>
<body>
    <h2>申请表</h2>
    <form method="post" action="#">
        <p>
            <label for="name">姓名:</label>
            <input type="text" id="name" name="names">
        </p>
        <p>
            教育程度:
            <input type="checkbox" name="jiaoyu" value="硕士" checked/>硕士
            <input type="checkbox" name="jiaoyu" value="博士"/>博士
        </p>
        <p>
            <label for="email">常用邮箱:</label>
            <input type="email" id="email" name="emails"/>
        </p>
        <p>
            性别:
            <input type="radio" name="sex" value="男" checked>男
            <input type="radio" name="sex" value="女">女
        </p>
        <p>
            <label for="age">年龄:</label>
            <input type="number" id="age" name="ages">
        </p>
        <p>
            <label for="monthMoney">月薪:</label>
            <input type="text" id="monthMoney" name="monthMoneys" size="12">
        </p>
        <p>
            <label for="fuzhu">附注:</label>
            <textarea name="fuzhus" id="fuzhu"  cols="25" rows="3" placeholder="请在这里输入附注"></textarea>
        </p>
        <p>
            国籍
            <select name="nationality">
                <option  value="澳大利亚" selected>澳大利亚</option>
                <option value="美国">美国</option>
                <option value="日本">日本</option>
                <option value="新加坡">新加坡</option>
            </select>
        </p>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

2,用HTML5实现电子产品调查表表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子产品调查问卷</title>
</head>
<body>
    <h2>American Metric 电子产品调查表</h2>
    <form action="#" method="post">
        <P>
            <label for="name">姓名:</label>
            <input type="text" id="name" name="names" placeholder="输入必须是2~6的字符" minlength="2" maxlength="6">
        </P>
        <p>
            <label for="date">购买日期:</label>
            <input type="text" id="date" name="butdate" size="12">年
            <select name="month">
                <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>
                <option value="5">5</option><option value="6">6</option><option value="7">7</option>
                <option value="8">8</option><option value="9">9</option> <option value="10">10</option>
                <option value="11">11</option><option value="12">12</option>
            </select>月
            <select name="date">
                <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>
                <option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option>
                <option value="9">9</option><option value="10">10</option><option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option><option value="14">14</option><option value="15">15</option>
                <option value="16">16</option><option value="17">17</option><option value="18">18
                </option><option value="19">19</option><option value="20">20</option>
                <option value="21">21</option><option value="22">22</option><option value="23">23</option>
                <option value="24">24</option><option value="25">25</option><option value="26">26</option>
                <option value="27">27</option><option value="28">28</option>
                <option value="29">29</option><option value="30">30</option><option value="31">31
            </select>日
        </p>
        <p>
            <label for="email">电子邮箱地址:</label>
            <input type="email" id="email" name="emails" placeholder="www.baidu.com">
        </p>
        <p>
            <label for="cardNumber">手机号码:</label>
            <input type="text" id="cardNumber" name="cardNumbers" size="30" placeholder="输入必须是以13/15/18开头的11位数字">
        </p>
        <p>
            您是否查看过我们的在线产品目录?
            <input type="radio" name="show" value="是" checked>是
            <input type="radio" name="show" value="否">否
        </p>
        <p>
            如果查看过,您对哪些产品有兴趣购买?(选择提供的产品)<br/>
            <input type="checkbox" name="product" value="大屏幕电视机">大屏幕电视机
            <input type="checkbox" name="product" value="音频设备">音频设备
            <input type="checkbox" name="product" value="视频设备">视频设备
            <input type="checkbox" name="product" value="相机">相机
        </p>
        <p>
            在填写订单之前,您还有什么问题、意见或建议?<br/>
            <textarea name="opinion"  cols="40" rows="3">您的输入:</textarea>
        </p>
        <input type="submit" value="提交">
        <input type="reset" value="重置" disabled>
    </form>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/suixinCaesar/article/details/80693318