第一题:请用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/></ p > < p > 您是否查看过我们的在线产品目录? < input type= "radio" name= "gender" id= "yes" checked /> < label for= "yes" >是 </ label > < input type= "radio" name= "gender" id= "no" /> < label for= "no" >否 </ label > </ p > < p > 如果查看过,您对哪些产品有兴趣购买?(选择提供的产品) < br > < 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 > </ p > < p > 在填写订单前,您还有什么问题,意见或建议? < br > < textarea name= "textarea" cols= "40" rows= "3" >您的输入: </ textarea > </ p > < p > < input type= "submit" name= "butButton" value= "提交" /> < input type= "reset" name= "butReset" value= "重置" disabled /> </ p > </ form > </ body > </ html >