初学html-信息搜集

最新推荐文章于 2024-05-08 09:37:30 发布

找找Bug

最新推荐文章于 2024-05-08 09:37:30 发布

阅读量987

点赞数

本文链接：https://blog.csdn.net/qq_36134376/article/details/82902199

版权

题目描述：

制作简单的收集信息的网页，使用10种以上标记收集20项以上的学生个人信息。

代码如下：

<!doctype html>
<html>
<head>
<title><form>的应用</title>
<meta charset="utf-8"/>
</head>
<body>
<form action="" method="get">
<table width="800" border="1" cellspacing="0" align="center" background="background.jpg">
<caption>大学生信息登记表</caption>
<tr>
 <td>姓名：</td>
 <td><input id="stuName" type="text"/></td>
 <td>性别：</td>
 <td><input id="boy" checked="checked" name="sex" type="radio"/>男&nbsp;&nbsp;<input id="girl" checked="checked" name="sex" type="radio"/>女</td>
 <td>出生日期：</td>
 <td><input id="date" type="date"/></td>
</tr>
<tr>
 <td>身份证号码：</td>
 <td><input id="identity" type="text" pattern="([0-9]{18})|(^[0-9]{17}[A-Z]{1}$)"/>
<br/><font color="FF0000">注：只允许填入18位数字或者17位数字加一个大写字母</font></td>
 <td>学校：</td>
 <td><input id="school" type="text"/></td>
 <td>专业：</td>
 <td><input id="major" type="text"/></td>
</tr>
<tr>
 <td>学号：</td>
 <td><input id="stuNumber" type="text" pattern="[0-9]{12}"/><br/><font color="FF0000">注：填入12位数字</font></td>
 <td>入学时间：</td>
 <td><input id="Date" type="date"/></td>
 <td>家庭住址：</td>
 <td><input id="address" type="text"/></td>
<tr>
 <td>民族：</td>
 <td><input id="nation" type="text"/></td>
 <td>籍贯：</td>
 <td><select id="province">
     <option>山西</option>
 <option>陕西</option>
 <option>甘肃</option>
 <option>天津</option>
 <option>北京</option>
 <option>山东</option>
 <option>上海</option>
<option>香港</option>
<option>澳门</option>
<option>贵州</option>
</select>
</td>
<td>小学学校</td>
<td><input id="junior" type="text"/></td>
</tr>
<tr>
 <td>初中学校</td>
 <td><input id="middle" type="text"/></td>
 <td>高中学校</td>
 <td><input id="high" type="text"/></td>
  <td>家庭人口数：</td>
  <td><input id="familyNum" type="number" min="1" max="10"/></td>
</tr>
<tr>
<td>爱好：</td>
<td colspan="5"><input id="swimming" type="checkbox"/>游泳
    <input id="chess" type="checkbox"/>下棋
    <input id="kungfu" type="checkbox"/>武术
    <input id="music" type="checkbox"/>音乐
    <input id="basketball" type="checkbox"/>篮球
    <input id="football" type="checkbox"/>足球
</td>
</tr>
<tr>
 <td>年级：</td>
 <td><select id="grade" name="grade">
     <option>2016</option>
 <option>2017</option>
 <option>2018</option>
 <option>2019</option>
</select>
</td>
<td>班级：</td>
<td><input id="class" type="text"/></td> 
<td>移动电话号码：</td>
<td><input id="telNUm" type="text" pattern="^[1][3,4,5,,7,8][0-9]{9}$"/>
<br/><font color="FF0000">注：填入11位数字,第一位必须为1，第二位可为3，4，5，7，9</font></td>
</tr>
<tr>
<td>个人获奖情况说明</td>
<td colspan="5"><textarea id="Resume" cols="100" name="Resume" rows="3"></textarea>
</td>
</tr>
<tr><td>&nbsp;</td>
<td colspan="5">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input id="submit1" type="submit" value="提交"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input id="reset1" type="reset" value="重置"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</td>
</tr>
</table>
</form>
</body>
</html>

效果截图如下：

心得体会：

使用了一些正则表达式限制了某些项的输入值，当输入错误时会有相应的错误提示。

找找Bug

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
初学html-信息搜集

题目描述：制作简单的收集信息的网页，使用10种以上标记收集20项以上的学生个人信息。代码如下：&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;form&gt;的应用&lt;/title&gt;&lt;meta charset="utf-8"/&gt;&lt;/head&a
复制链接

扫一扫