前端基础：通过表单元素实践《健康体检单》
HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。
一、项目说明
该项目是进行表格布局表单应用的一个案列，主要目的是掌握表单各元素的使用，并熟练运用其中的属性。表单也是网页主要元素的一大应用。
二、项目效果图展示
根据具体的布局流程，搭建html框架，然后在body标签中用table、tr、td来进行布局，再把相关的表单元素放到相应的布局里。
效果图如下图所示。
三、搭建html基本结构
HTML基本结构在《李白诗词赏析》项目中已做介绍,代码如下。
<html>
<head>
<title>菜单</title>
</head>
<body>
</body>
</html>
四、表单元素的介绍
1、表单定义（<form></form>标签）
HTML表单是一个包含表单元素的区域， 表单使用<form>标签创建。比如文本字段、复选框、单选框、提交按钮等等。表单<form>创建语法如下。
<form action="reg.ashx" method="post">
<!--表单元素在这里-->
</form>
2、表单重要属性
（1）action：规定当提交表单时，向何处发送表单数据。action取值可以有以下三种。
第一，一个URL（绝对URL/相对URL），一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理。比如<form action="http://www.myblogs.com/;reg.asp">，当用户提交这个表单时，服务器将执行网址"http://www.cnblogs.com/"上的名为"reg.asp"的一般处理程序。
第二，使用mailto协议的URL地址，这样会将表单内容以电子邮件的形式发送出去。这种情况比较少见的，因为它要求访问者的计算机上安装和正确设置好了邮件发送程序。
第三，空值，如果action为空或不写，表示提交给当前页面。
（2）method：该属性定义浏览器将表单中的数据提交给服务器处理程序的方式。关于method的取值，最常用的是get和post。两者之间的区别在于。
第一，使用get方式提交表单数据，Web浏览器会将各表单字段元素及其数据按照URL参数格式附在
标签的action属性所指定的URL地址后面发送给Web服务器；由于URL的长度限制，使用get方式传送的数据量一般限制在1KB以下。
第二，使用post方式，浏览器会将表单数据作为HTTP请求体的一部分发送给服务器。一般来说，使用post方式传送的数据量要比get方式传递的数据量大；根据HTML标准，如果处理表单的服务器程序不会改变服务器上存储的数据，则应采用get方式（比如查询），如果表单处理的结果会引起服务器上存储的数据的变化，则应该采用post方式（比如增删改操作）。
其它方式（Head、PUT、DELETE、TRACE 或 OPTIONS等）。其实，最初HTTP标准对各种操作都规定了相应的method，但后来很多都没有被遵守，大部分情况只是使用get或post就OK。
把action和method应用到form表单上，最终的语法格式如下。
<formmethod="传送方式"action="服务器文件">
3、表单内的主要元素
（1）文本输入框，密码输入框
当用户需要在表单中键入字母，数据等，就要用到文本输入框，文本输入框也可以转化为密码输入框。语法如下。
<form>
<inputtype="text/password"name="名称"value="文本"/>
</form>
在语法代码中，相关参数的解释如下：
type：当type为text时，为文本输入框；当type为password时，为密码输入框
name：为文本框命名，以备后台aspphp使用
value：为文本输入框设置默认值（一般起提示作用）
如下面的应用文本框和密码框的html代码示例。
<html>
<head>
<title>文本输入框、密码输入框</title>
</head>
<body>
<form method="post"action="save.php">
账户:
<input type="text"name="myName"/>
<br/>
密码:
<input type="password" name="pass"/>
</form>
</body>
</html>
在网页中显示结果如下图所示。
从图中看，唯一美中不足的是少了一个按钮。在form表单中，将input标签的type属性设置为”button”表示按钮。
（2）按钮
按钮在现实生活中随处可见，同时也广泛存在于各种网页设计中，是人们都比较熟悉的一种网页元素。相比于文字链接或者图片，“按钮”拥有着更加强烈的点击暗示——按钮就是用来点击的。表单中也有一些按钮，比如表单底部提交区的“提交”按钮，提交后页面中的“返回”按钮，以及进行表单前后翻页的“分页”按钮，“重置”表单的按钮等。
第一种基本按钮，如果游览者想制作一个用于触发事件的普通按钮，可以使用<input>元素的type属性设置普通按钮（button),格式如下。
<input type="button" value="按钮名"/>
第二种提交按钮，当游览者完成表单的填写，想要发送时，可使用<input>元素的type属性设置成(submit)按钮，将表单内容送给action属性中的网址或函件信箱。
<input type="submit" value="按钮名"/>
第三种重置按钮，如果游览者想清除输入到表单中的全部内容，可以使用<input>元素中的type属性设置重置按钮（reset），以省去在重新输入前，一项一项删除的麻烦！格式如下。
<input type="reset" value="按钮名"/>
为文本框、密码框页面添加登录按钮的html代码如下。
<html>
<head>
<title>文本输入框、密码输入框</title>
</head>
<body>
<form method="post"action="login.php">
账户:
<input type="text"name="myName"/>
<br/>
密码:
<input type="password"name="pass"/>
<br/>
<input type="submit" value="登录"/>
</form>
</body>
</html>
在网页中显示结果如下图所示。
图中的“登录”是一个“submit”类型的按钮，点击后提交到form标签中action指定的地址中。
（3）文本域：支持多行文本输入
当用户需要在表单中输入大段文字时，就要用到文本输入域。
文本输入域的语法格式如下
<textarearows="行数"cols="列数">文本</textarea>
语法需要注意的具体内容如下：
文本输入域以<textarea>开始，以</textarea>结束
rows表示输入文本输入域的行数
cols表示输入文本输入域的列数
在<textarea></textarea>标签之间输入默认值
如下面的应用文本域的html代码示例。
<html>
<head>
<title>文本域</title>
</head>
<body>
<form method="post"action="save.php">
<label>个人简介</label>
<br/>
<textarea rows="5"cols="10">在这里输入内容...</textarea></span>
</br>
<input type="submit"value="确定"name="submit"/>
<input type="reset"value="重置"name="reset"/>
</form>
</body>
</html>
在网页中显示结果如下图所示。
（4）使用单选框，复选框让用户选择
在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好办法，在HTML中，有单选框和复选框，两者的主要区别是单选框中用户的选项只能选择一项，而复选框中用户可以任意选择多项，甚至全选。
语法格式如下：
<input type="radio/checkbox" value="值" name="名称"checked="checked"/>
对语法格式的讲解如下：
type:radio:控件单选框
checkbox:控件复选框
value:提供数据到服务器的值
name：为控件命名，以备后台程序ASP，PHP使用
checked：当设置checked=“checked”时，该选项被默认选中。
如下面的应用单选框/复选框的html代码示例。
<html>
<head>
<title>单选框、复选框</title>
</head>
<body>
<form name="iForm" method="post" action="save.php">
你是否喜欢旅游？<br/>
<input type="radio"name="radioLove"value="喜欢"checked="checked"/></span>
<input type="radio"name="radioLove"value="不喜欢"/>
<input type="radio"name="radioLove"value="无所谓"/>
<br/><br/>
你对那些运动感兴趣？<br/>
<input type="checkbox"name="checkbox1"value="跑步"/>
<input type="checkbox"name="checkbox1"value="打球"checked="checked"/>
<input type="checkbox"name="checkbox1"value="登山"checked="checked"/>
<input type="checkbox"name="checkbox1"value="健身"/>
</form>
</body>
</html>
在网页中显示结果如下图所示。
注意：同一组的单选按钮，name的取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。
（5）下拉菜单
表示下拉菜单的html元素是select,菜单中每一个选项由option元素表示,用户可以从下拉菜单的多个选项中进行选择.下位菜单只会显示其中一项的内容,其余选项需要用户单击下拉按钮才可见.
如下面的应用下拉菜单的html代码示例。
<html>
<head>
<title>下拉菜单</title>
</head>
<body>
<form name="iForm"method="post"action="save.php">
<label>爱好:</label>
<select>
<option value="读书">读书</option></span>
<option value="运动">运动</option>
<option value="音乐">音乐</option>
<option value="旅游">旅游</option>
<option value="购物">购物</option>
</select>
</form>
</body>
</html>
在网页中显示结果如下图所示。
（6）下拉列表
使用下拉列表框，节省空间，既可以单选，又可以多选。
如下面的应用下拉列表的html代码示例。
<html>
<head>
<title>下拉列表</title>
</head>
<body>
<form>
你对什么运动感兴趣：<br/>
<select multiple="multiple">
<option>慢跑</option>
<option>登山</option>
<option>篮球</option>
<option>抽烟</option>
<option>喝酒</option>
<option>烫头</option>
</select>
</form>
</body>
</html>
在网页中显示结果如下图所示。
对于select下拉列表的多选可以在widows下按住ctrl,同时单击，或者在Mac下按下Command和单击的组合键。
（7）HTML5新增加的智能表单元素
HTML5新增加了一些表单智能元素。邮箱类型type=“email”可以由文本框自动判别当前地址是否属于邮箱，其实就是找一下是否有“@”字符，地址类型type=“url”可以由文本框自动判别当前地址是否是域名地址，其实就是找一下是否有“http://”，日期类型type=“date”和时间类型“time”类型，点击会有下拉的日历效果，月份类型type=“month”、星期类型type=“week”也是如此，滑动条类型type=“range”页面中会显示一个滑轨和滑块，颜色类型type=“color”点击会出现颜色的设置框，文件类型type=“file”可以选择文件。
如下面的添加智能元素的html代码示例。
<html>
<head>
<title>单选框、复选框</title>
</head>
<body>
<form action="Test.html" method="get">
<table>
<tr>
<td>邮箱</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td>地址</td>
<td><input type="url" name="url"></td>
</tr>
<tr>
<td>日期</td>
<td><input type="date" name="data"></td>
</tr>
<tr>
<td>时间</td>
<td><input type="time" name="time"></td>
</tr>
<tr>
<td>月份</td>
<td><input type="month" name="month"></td>
</tr>
<tr>
<td>星期</td>
<td><input type="week" name="week"></td>
</tr>
<tr>
<td>滑动条</td>
<td><input type="range" name="range"></td>
</tr>
<tr>
<td>颜色</td>
<td><input type="color" name="color"></td>
</tr>
<tr>
<td><input type="submit"></td>
</tr>
</table>
</form>
</body>
</html>
在网页中显示结果如下图所示。
五、《健康体检单》的布局
结合于表格的布局，table、tr和td标签的相互配合，colspan和rowspan属性的使用，确定好总体布局后在对应的单元格内填写好表单元素即可。
《健康体验单》布局如下。
<html>
<head>
<title>跟踪单</title>
</head>
<body>
<center>
<table border=1>
<caption><font size=7>健康检查登记表</font></caption>
<tr><td colspan="12" height="30" align="right">体检时间 年 月 日 </td>
</tr>
<tr>
<td width="50" height="30" align=center>姓名</td>
<td><input type="text" width="100"></td>
<td width=50 height=30 align=center>性别</td>
<td>
<input type="radio" name="sex">男</input>
<input type="radio" name="sex">女</input>
</td>
<td width=70 height=30 align=center>年龄</td>
<td><input type="text" width=100 ></td>
<td width=50 height=30 align=center>婚否</td>
<td>
<input type="radio" name="yes">是</input>
<input type="radio" name="yes">否</input>
</td>
<td width=50 height=30 align=center>籍贯</td>
<td><input type="text" width=100></td>
<td rowspan="5" width=150 height=120 align=center><br/><br/>照<br/><br/><br/>片<br/><br/><br/><font size=1>医院区域章</font></td>
</tr>
<tr>
<td align=center>住址</td>
<td colspan="3"><input type="text" width=253></td>
<td align=center>所属单位</td>
<td colspan="4"><input type="text" width=310></td>
</tr>
<tr>
<td colspan="4">既往史及家族史<input type="text" width=200></td>
<td align=center>家庭住址</td>
<td colspan="4"><input type="text" width=200></td>
</tr>
<tr>
<td colspan="9">身份证号<input type="text" width=640></td>
</tr>
<!--体格检查-->
<tr>
<td rowspan="19" align=center><font size=6>体</br></br></br>格</br></br></br>检</br></br></br>查</font></td><b>
<td colspan="8">既往病史<input type="text" width=587></td>
</tr>
<!--内科-->
<tr>
<td align=center rowspan="9"><font size=5>内<br/><br/><br/><br/>科</font></td>
<td colspan="2"> 身高 cm</td>
<td colspan="2"> 体重 kg</td>
<td colspan="2"> 心率 次/分</td>
<td colspan="3">血压<span style="padding-left:40">mmHg</span></td>
</tr>
<tr>
<td align=center>发育</td>
<td colspan="3"><input type="text" width=273 height=20 ></td>
<td align=center>营养</td>
<td colspan="4"><input type="text" width=330 height=20></td>
</tr>
<tr>
<td colspan="9">头颈部 甲状腺 淋巴腺</td>
</tr>
<tr>
<td>胸部</td>
<td colspan="8"><input type="text" ></td>
</tr>
<tr>
<td colspan="2">心脏、血管</td>
<td colspan="5"><input type="text" ></td>
<td colspan="2" rowspan="5"> 医生意见:</br></br></br></br></br> 签名:<input type"text" style="border:none;width:50"></td>
</tr>
<tr>
<td colspan="2">肺</td>
<td colspan="5"><input type="text" ></td>
</tr>
<tr>
<td colspan="2">腹部</td>
<td colspan="5">肝脾<input type="text" ></td>
</tr>
<tr>
<td colspan="2">神经系统</td>
<td colspan="5"><input type="text" ></td>
</tr>
<tr>
<td colspan="2">其他</td>
<td colspan="5"><input type="text" ></td>
</tr>
<!--五官科-->
<tr>
<td align=center rowspan="5">五<br/>官</br>科</td>
<td colspan="2" rowspan="2" align=center>视</br>力</td>
<td align=center>裸</br></br>视</td>
<td >左<input type="text" width=150></br></br>右<input type"text" width=150></td>
<td align=center>沙</br></br>眼</td>
<td colspan="2"><input type="text" width=150></td>
<td colspan="2" rowspan="5"> 医师意见:</br></br></br></br></br></br></br></br></br></br></br></br> 签名:<input type="text" width=50></td>
</tr>
<tr>
<td align=center>矫</br>正</br>视</br>力</td>
<td >左<input type="text" width=150></br></br>右<input type="text" width=150></td>
<td align=center>辨</br>分</br>力</td>
<td colspan="2" align=center>正常</br>色因</br>色弱</td>
</tr>
<tr>
<td colspan="2" align=center>耳</td>
<td align=center>听</br></br>力</td>
<td >左<input type"text" width=150></br></br>右<input type"text" width=150></td>
<td align=center>耳</br></br>疾</td>
<td colspan="2"><input type"text" width=150></td>
</tr>
<tr>
<td colspan="2"align=center>鼻</td>
<td colspan="2"><input type"text" width=100></td>
<td align=center>喉</td>
<td colspan="2"><input type"text" width=100></td>
</tr>
<tr>
<td colspan="2"align=center>口腔</td>
<td colspan="2"><input type"text" width=100></td>
<td align=center>齿</td>
<td colspan="2"><input type"text" width=100></td>
</tr>
<!--外科-->
<tr>
<td rowspan="4"align=center >外</br>科</td>
<td colspan="2">脊柱和四肢</td>
<td colspan="5"><input type="text" width=350></td>
<td colspan="2" rowspan="4"> 医师意见:</br></br></br></br></br> 签名:<input type="text" width=50></td>
</tr>
<tr>
<td colspan="2">肛门和外生殖器</td>
<td colspan="5"><input type="text" width=150></td>
</tr>
<tr>
<td colspan="2">皮肤疾患</td>
<td colspan="5"><input type="text" width=150></td>
</tr>
<tr>
<td colspan="2">其他</td>
<td colspan="5"><input type="text" width=150></td>
</tr>
<tr>
<td align=center>实</br></br>验</br></br>室</br></br>检</br></br>查</td>
<td colspan="10"><textarea rows=10 cols=150></textarea></td>
</tr>
<tr>
<td align=center>X</br></br>光</td>
<td colspan="10"><textarea rows=5 cols=150></textarea></td>
</tr>
<tr>
<td align=center>心</br></br>电</br></br>图</td>
<td colspan="10"><textarea rows=5 cols=150></textarea></td>
</tr>
<tr>
<td align=center>结</br></br>论</td>
<td colspan="10"><textarea rows=3 cols=150></textarea></td>
</tr>
</table>
</center>
</body>
</html>
最终代码在html页面中显示的结果如下。
434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
