前端基础:通过表单元素实践《健康体检单》

前端基础:通过表单元素实践《健康体检单》

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">体检时间&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;月&nbsp;&nbsp;日&nbsp;</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">&nbsp;&nbsp;身高&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cm</td>
                <td colspan="2">&nbsp;&nbsp;体重&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;kg</td>
                <td colspan="2">&nbsp;&nbsp;心率&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;次/分</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">头颈部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;甲状腺&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;淋巴腺</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">&nbsp;医生意见:</br></br></br></br></br>&nbsp;签名:<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">&nbsp;医师意见:</br></br></br></br></br></br></br></br></br></br></br></br>&nbsp;签名:<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">&nbsp;医师意见:</br></br></br></br></br>&nbsp;签名:<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页面中显示的结果如下。

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值