第三章

1<label>标签的for属性表示什么?
使用for属性来指定当鼠标单击标注文本时,焦点对应的表单元素。
2.哪些元素自身就有验证功能?
placeholder,required,pattern。
3.请用HTML5实现申请表表单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>申请表</h1>
<form method="post" action="">
    <p>姓名:<input name="name" type="text"></p>

<p>
    教育程度:
    <input type="checkbox" name="" value="" checked>硕士
    <input type="checkbox" name="" value="" >博士
</p>
    <p>
        常用邮箱:
        <input type="email" name="email"/>
    </p>
    <form>
        性别:
        <label for="male">男</label>
        <input type="radio" name="gender" id="male">
        <label for="female">女</label>
        <input type="radio" name="gender" id="female">
        <p>年龄:<input name="age" type="text"></p>
        <p>月薪:<input name="name" type="text"></p>
        <p>附注:
            <textarea name="textarea" cols="30" rows="10"> 请在这里键入附注
            </textarea>
        </p>
        <p>
            国籍
            <select name="bmon">
                <option value="">澳大利亚</option>
                <option value="1">美国</option>
                <option value="2">日本</option>
                <option value="3">新加坡</option>
                <option value="4">四月</option>
            </select>
        </p>
        <p>
            <input type="submit" name="Button" value="提交"/>
            <input type="reset" name="Reset" value="重置"/>
        </p>
    </form>
</form>
</body>
</html>

在这里插入图片描述
4请用HTML5实现电子产品调查表表单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>American Metric电子产品调查表</h1>
<form method="post" action="">
<p>姓名:<input name="name" type="text"required placeholder="输出必须是2-6字符" /></p>
    <p>购买日期:<input type="" name="byear" value="" size="4" maxlength="4">年
        <select name="bmon">

            <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="r">
            <option value="1">1</option>
            <option value="1">2</option>
            <option value="1">3</option>
            <option value="1">4</option>
            <option value="1">5</option>
            <option value="1">6</option>
            <option value="1">7</option>
            <option value="1">8</option>
            <option value="1">9</option>
            <option value="1">10</option>
            <option value="1">11</option>
            <option value="1">12</option>
            <option value="1">13</option>
            <option value="1">14</option>
            <option value="1">15</option>
            <option value="1">16</option>
            <option value="1">17</option>
            <option value="1">18</option>
            <option value="1">19</option>
            <option value="1">20</option>
            <option value="1">21</option>
            <option value="1">22</option>
            <option value="1">23</option>
            <option value="1">24</option>
            <option value="1">25</option>
            <option value="1">26</option>
            <option value="1">27</option>
            <option value="1">28</option>
            <option value="1">29</option>
            <option value="1">30</option>
            <option value="1">31</option>
        </select>日
    </p>
    <p>
        电子邮箱地址:
        <input type="url" name="userUrl" placeholder="www.baidu.com"/>
    </p>
    <p>
     手机号码:
        <input type="url" name="numbeer" size="40" maxlength="11" placeholder="输入必须是以13/15/18开头的11位数字"/>
    </p>
    <p>
    您是否查看过我们的在线产品目录?
    <input name="gen" type="radio" value="是" checked/>是
        <input name="gen" type="radio" value="否"/>否
    </p>
    如果查看过,您对哪些产品有兴趣购买? (选择提供的产品)
    <p>
        <input type="checkbox" name="interest" value="sports"/>大屏幕电视机
        <input type="checkbox" name="interest" value="sports"/>音频设备
        <input type="checkbox" name="interest" value="sports"/>视频设备
        <input type="checkbox" name="interest" value="sports"/>相机
    </p>
    <p> 在填写订单之前,您还有什么问题、意见或建议?</p>

    <textarea name="textarea" cols="30" rows="10">您的输入
    </textarea></form>
<p>
    <input type="submit" name="Button" value="提交"/>
    <input type="reset" name="Reset" value="重置" disabled/>
</p>
</form>
</body>
</html>

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值