表单第三章

第一题：请用HTML5实现图3.44所示的申请表表单。相关要求如下。

教育程度：默认选中硕士。

国籍：有美国，澳大利亚，日本，新加坡，默认选中澳大利亚。

单击文字相应的文本框得到焦点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>申请表</title>
</head>
<body>
<h1>申请表</h1>
<form action="#" method="post">
    <p>
        姓名：
        <input name="name" type="text" size="5"/>
    </p>
    <p>
        教育程度：
        <label for="master">硕士</label>
        <input type="checkbox" name="interest" id="master" checked/>
        <label for="doctor">博士</label>
        <input type="checkbox" name="interest" id="doctor"/>
    </p>
    <p>
        常用邮箱：
        <input type="email" name="email"/>
    </p>
    <p>
        性别
        <input type="radio" name="gender" id="male" checked/>
        <label for="male">男</label>
        <input type="radio" name="gender" id="female"/>
        <label for="female">女</label>

    </p>
    <p>
        月薪：
        <input type="number" name="num" min="0" max="30000"/>
    </p>
    <p>
        附注：
        <textarea name="textarea" cols="30" rows="4">请在这里键入附注
    </textarea>
    </p>
    <p>
        国籍：
        <select name="bmon">
            <option value="">澳大利亚</option>
            <option value="">美国</option>
            <option value="">日本</option>
            <option value="">新加坡</option>
        </select>
    </p>
    <p>
        <input type="button" name="butButton" value="提交"onabort="alert(this.value)"/>
        <input type="reset" name="butReset" value="重置"/>
    </p>
</body>
</html>
</form>

第二题：请用HTML5实现3.45所示的电子产品调查表表单。相关要求如下：

购买日期：“月”下拉列表框为1~12月，“日”下拉列表框为1~31日。

您是否查看过我们的在线产品目录：默认选中“是”。

单击文字相应的文本框得到焦点。

所有的表单元素不能为空。

使用placeholder属性为表单元素添加提示文字。

“重置”按钮禁止操作。

不需要用pattern写验证条件（后续课程会详细学习，到时候再添加）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子产品调查问卷</title>
</head>
<body>
<h1>American Metric 电子产品调查问卷</h1>
<form action="#" method="post">
    <p>
        姓名：

        <input name="name" type="text" placeholder="输入必须是2~6位字符" required/>
    </p>
    <p>
        购买日期：
        <input type="text" name="byear" value="2018" size="4" maxlength="4"/>年
        <select name="bmon">
            <option value="">请选择月份</option>
            <option value="1">一月</option>
            <option value="2">二月</option>
            <option value="3">三月</option>
            <option value="4">四月</option>
            <option value="5">五月</option>
            <option value="6">六月</option>
            <option value="7">七月</option>
            <option value="8">八月</option>
            <option value="9">九月</option>
            <option value="10">十月</option>
            <option value="11">十一月</option>
            <option value="12">十二月</option>
        </select>月
        <select name="bmon">
            <option value="">请选择日期</option>
            <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</option>
        </select>日
</form>
</p>
<p>
    电子邮箱地址：
    <input type="email" name="email" placeholder="www.baidu.com" required/>
</p>
<p>
    电话号码：

<input type="tel" name="tel" id="tel" size="30" required pattern="1[3578]\d{9} placeholder="输入必须是以13/15/18开头的11位数" required/>

您是否查看过我们的在线产品目录？ < input type= "radio" name= "gender" id= "yes" checked /> < label for= "yes" >是 </ label > < input type= "radio" name= "gender" id= "no" /> < label for= "no" >否 </ label > 如果查看过，您对哪些产品有兴趣购买？(选择提供的产品) < input type= "checkbox" name= "interest" id= "television" /> < label for= "television" >大屏幕电视机 </ label > < input type= "checkbox" name= "interest" id= "audio" /> < label for= "audio" >音频设备 </ label > < input type= "checkbox" name= "interest" id= "video" /> < label for= "video" >视频设备 </ label > < input type= "checkbox" name= "interest" id= "camera" /> < label for= "camera" >相机 </ label > 在填写订单前，您还有什么问题，意见或建议？ < textarea name= "textarea" cols= "40" rows= "3" >您的输入: </ textarea > < input type= "submit" name= "butButton" value= "提交" /> < input type= "reset" name= "butReset" value= "重置" disabled /> </ form > </ body > </ html >

表单 第三章

猜你喜欢