前端基础：通过表单元素实践《健康体检单》
前端基础：通过表单元素实践《健康体检单》
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页面中显示的结果如下。
前端基础：通过表单元素实践《健康体检单》相关推荐
- 【前端基础】表单标签/提交
[前端基础]表单标签/提交 表单标签 1. 表单的介绍 2. 表单相关标签的使用 3. 小结 表单提交 1. 表单属性设置 2. 表单元素属性设置 3. 示例代码 小结 表单标签 学习目标 能够知道表 ...
- 前端基础-html-列表
<!-- 无序列表 场景:在网页中表示一组无顺序之分的列表,如:新闻列表 标签组成: ul:表示无序列表的整体,用于包裹li标签 li:表虚无序列表的每一项,用于包含每一行的内容 显示特点:列表 ...
- 健康体检预约app的设计与实现
目录 第1章 绪论 2 1.1 研究背景和意义 2 1.2 国内外研究概况 3 第2章 需求分析与总体设计 5 2.1 系统业务流程 5 2.2 系统功能需求分析 6 2.2.1 Android客户端 ...
- HTML表单元素初识1——零基础自学网页制作
表单元素初识 我们在浏览网页时会经常遇到注册会员的界面,大概像这个样子: 或填写问卷的情况,大概像这个样子: 我们把这些内容称之为表单. 如何向自己的页面中添加表单呢? 添加表单的操作和添加表格类似. ...
- form表单中根据值判断是否disabled_Java 0基础入门 （Html表单、表单元素）
上一篇:Java 0基础入门 (Html标签的使用) 表单在网页中主要负责数据采集功能. 一.表单实际应用场景 百度搜索 5173注册 如上两张图,图中的黑色线条是我画上去的,如果按照黑线,在Excl ...
- Html前端基础（form表单、img标签、a href标签、id的作用）
文章目录 一.img标签 二.a标签(带href) 三.form表单 本篇主要分析Html前端开发中的img图片标签.a href超链接标签.form表单标签,其中form是重点 一.img标签 1. ...
- HTML基础--表单元素知识
学习目标: 通过简单的实践,学习基本的 HTML FORM 标签,理解各种表单元素的使用场景,并且掌握表单一系列基本验证方式. 学习内容: 1.HTML表单 HTML 表单用于搜集不同类型的用户输入. ...
- vue动态生成表单元素基础篇
这里讲解一个vue生成表单的简单实例: (图一) (图二) (图三) 如上图所示: 图一: 空的输入框的情况 图二: 点击 "+" 添加生成表单的情况 图三: 表单中可以输入值,并 ...
- html 表单命名规范,最佳实践：按HTML ID或名称属性访问表单元素？
最佳实践:按HTML ID或名称属性访问表单元素? 正如任何经验丰富的JavaScript开发人员所知,有很多(太多)方法可以做同样的事情.例如,假设您有一个文本字段,如下所示: 在JavaScrip ...
最新文章
- 图书抄袭何时休，技术人的版权在哪里？
- java中double类型精度丢失问题及解决方法
- 数据结构[单链表]操作大全（初始化，创建，插入，查询，删除，长度，输出）c++代码实现
- 优化tableView性能（针对滑动时出现卡的现象）
- aqs clh java_【Java并发编程实战】—– AQS(四)：CLH同步队列
- Ubuntu14.04安装和配置Tomcat8.0.12(转）
- ie8一下解决圆角，阴影不兼容问题
- android开发入门
- 计算机网络之网络概述：2、标准化工作及其相关组织
- 如何保证投票公平_从声音玩具淘汰、五条人复活，我看到了《乐队的夏天》的不公平...
- python-面向对向-实例方法的继承-多继承父类中的super与子类实例对象的关系
- 锁定/解锁bootloader命令
- html鼠标滑过带音效,HTML5带音效的交互式日食动画
- websocket连接相关的几个问题
- 在html中做表格以及给表格设置高宽字体居中和表格线的粗细
- vue插入富文本编辑器（支持视频和图片的上传）
- rejected Updates were rejected because the remote contains work that you
- 斯蒂文斯理工学院计算机科学硕士,2020年斯蒂文斯理工学院排名TFE Times美国最佳计算机科学硕士专业排名第80...
- 读书笔记——寻找道德
- BAT春晚发红包，A、T宕机3年，为啥2019年百度挺住了？