今天学到了HB的表单用法,还有音频和视频用法。其中知道了HTML中的from的用法。
html中使用form标签完成。表单标签其实是一组标签的组合,不是一个标签。
表单元素是允许用户在表单中(比如:输入框、文本域、下拉列表、单选框、复选框等等)输入信息的元素。
在html中使用<form>来定义表单:
常见的表单元素有:
在form标签中经常使用其他标签:
input主要是用来让用户输入数据的标签。input标签中的type属性,可以设置当前让用户输入的数据填写的类型
input标签的type属性
type="text" 文本框 ,主要用于让用户输入可见的数据,input的默认属性;
type="password" 密码框,主要用于让用户输入不可见的数据
type="radio" 单选按钮,这个一般是让用户选择的,注意name属性必须一致
type="checkbox" 复选框,用户可以选择多个条件
type="file" 选择文件,可以把本地的文件上传到服务器
type="submit" 提交, 提交整个form表单中的数据到服务端
type="reset" 重置,把form表单中的数据重置到初始状态
type="button" 按钮,就是一个简单按钮,没有任何的点击效果
type="image" 图片,可以代替submit提交
type="hidden" 隐藏数据,页面上不会显示,但是这个数据依然会在选择提交的时候提交给服务端
<select> 下拉框,需要和option标签一起使用
<textarea rows="5" cols="40"> 文本区域,其中rows文本区域显示的多少行,cols用于显示文本区域每行多少列。
input : 用户输入一些文本信息, 默认是type="text"
type="password" : 密码框,输入 的内容不可见
type="radio" 单选框,一定要给出name的属性值,并且一定要一样,
checked="checked" 默认选中的效果
type="checkbox" 多选框
type="hidden" :隐藏的按钮
select : 下拉框,配合option一起使用, selected="selected"默认选中的效果
textarea : 文本区域
button : 简单的一个按钮
然后就是视频标签和视频标签的用法
<video src="" controls=””></video>(这是视频标签)
<audio src="song.mp3" controls="controls" loop="loop"(这是音频标签)
然后就是今天的作业用表单的方法对表格进行修改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1px" width="800px" height="900px" cellpadding="0px" cellspacing="0px" >
<!--名称-->
<tr align="center">
<th colspan="7">个人简历</th>
</tr>
<tr align="center">
<!--基本信息-->
<th>姓 名</th>
<td><input type="text" id="username" name="username" placeholder="请输入你的名字"/></td>
<th>性 别</th>
<td><input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女</td>
<th>民 族</th>
<td><select>
<option value="请选择">请选择</option>
<option value="汉">汉</option>
<option value="壮族">壮族</option>
<option value="土族">土族</option>
<option value="藏族">藏族</option>
<option value="满族">满族</option>
</td>
<th rowspan="4" width="120"><a href="http://bd.maoni521.com/" target="_blank">
<img src="../img/nan.jpg" width="180px" height="200px"/>
</a>
</th>
</tr>
<tr align="center">
<!--出生地日-->
<th>出生年月</th>
<td><input type="date" /></td>
<th>政治面貌</th>
<td><select>
<option value="请选择">请选择</option>
<option value="群众">群众</option>
<option value="党员">党员</option>
<option value="团员">团员</option></td>
<th>籍 贯</th>
<td><select>
<option value="请选择">请选择</option>
<option value="南京">南京</option>
<option value="重庆">重庆</option>
<option value="成都">成都</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
</select></td>
</tr>
<tr align="center">
<!--身体招生-->
<th>身体状况</th>
<td><select>
<option value="请选择">请选择</option>
<option value="健康">健康</option>
<option value="亚健康">亚健康</option>
<option value="偏瘦">偏瘦</option>
<option value="偏胖">偏胖</option>
</td>
<th>身 高</th>
<td><select>
<option value="请选择">请选择</option>
<option value="180cm">180cm</option>
<option value="175cm">175cm</option>
<option value="170">170cm</option>
<option value="165cm">165cm</option>
<option value="165以下">165以下</option>
</td>
<th>招生类别</th>
<td><select>
<option value="请选择">请选择</option>
<option value="并轨">并轨</option>
<option value="统招">统招</option>
<option value="非统招">非统招</option>
</td>
</tr>
<tr align="center">
<!--学历-->
<th>学 历</th>
<td><select>
<option value="请选择">请选择</option>
<option value="研究生">研究生</option>
<option value="博士生">博士生</option>
<option value="本科">本科</option>
<option value="大专">大专</option>
<option value="中专">中专</option>
</td>
<th>学 制</th>
<td><input type="text" id="username" name="username" placeholder="请输入你的学年"/></td>
<th>系 别</th>
<td><select>
<option value="请选择">请选择</option>
<option value="电子信息工程">电子信息工程</option>
<option value="艺术设计">艺术设计</option>
<option value="建筑工程">建筑工程</option>
</td>
</tr>
<tr align="center">
<!--毕业院校-->
<th>毕业学校</th>
<td colspan="3"><select>
<option value="请选择">请选择</option>
<option value="清华大学">清华大学</option>
<option value="北京大学">北京大学</option>
<option value="南京大学">南京大学</option>
<option value="南京医科大学">南京医科大学</option>
</td>
<th>专 业</th>
<td colspan="2"><select>
<option value="室内设计">室内设计</option>
<option value="计算机科学">计算机科学</option>
<option value="土木工程">土木工程</option>
<option value="临床医学">临床医学</option>
</td>
</tr>
<tr align="center">
<!--联系方式-->
<th>电 话</th>
<td colspan="2"><input type="text" id="username" name="username" placeholder="请输入你的电话"/></td>
<th colspan="2">E-mail 地址</th>
<td colspan="2"><input type="text" id="username" name="username" placeholder="请输入你的邮箱"/> </td>
</tr>
<tr align="center">
<!--邮箱地址-->
<th>联系地址</th>
<td colspan="6"><input type="text" id="username" name="username" placeholder="请输入你的联系地址"/></td>
</tr>
<tr>
<th>家庭地址</th>
<td colspan="6"align="center"> <input type="text" id="username" name="username" placeholder="请输入你的联系地址"/></td>
</tr>
<tr align="center">
<!--兴趣爱好-->
<th>爱 好</th>
<td colspan="6"><input type="checkbox" name="hobby" value="穿墙术" />穿墙术
<input type="checkbox" name="hobby" value="影身术"/>影身术
<input type="checkbox" name="hobby" value="七十二变"/>七十二变
<input type="checkbox" name="hobby" value="java"/>java
<input type="checkbox" name="hobby" value="篮球"/>篮球
<input type="checkbox" name="hobby" value="唱歌"/>唱歌</td>
</tr>
<tr align="center">
<!--荣誉-->
<th>个人奖励</th>
<td colspan="6" rowspan="3" ><textarea cols="100px" rows="10px"></textarea>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr align="center">
<!--实习情况-->
<th>实<br/>
践<br />
情<br />
况<br/>
</th>
<td colspan="6" rowspan="3"><textarea cols="100px" rows="10px"></textarea>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr align="center">
<!--学会了哪些技能-->
<th>IT<br/>
技<br />
术<br />
</th>
<td colspan="6" rowspan="3"><textarea cols="100px" rows="10px"></textarea>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr align="center">
<!--自我认知-->
<th>自我<br/>
评价<br />
</th>
<td colspan="6" rowspan="3"><textarea cols="100px" rows="4px"></textarea>。</td>
</tr>
</table>
</body>
</html>