您的位置：首页 > Web前端 > HTML

HTML学习笔记之表单的设计

2015-10-20 09:45 696 查看
一.建立表单

表单的主要功能是收集信息，接受浏览者在网页中的操作，并传递给CGI或ASP等服务器端的表单处理程序。一般表单由两部分组成，一是描述表单元素的HTML代码；二是客户端的脚本(如CGI或ASP程序)。

表单是网页上的一个特定区域，它由<form>标签来定义，这个标签是成对标签。<form>标签有三个属性:一是name属性，该属性用来定义表单的名称；二是method属性，该属性用来定义表单结果从浏览器传送到服务器的方式，属性的参数值一般有两种：get和post，默认参数为get；三是action属性，该属性用来指定表单处理程序(CGI或ASP等服务器端的表单处理程序)的位置。其语法格式如下：

<form name="form_name" method="method" action="url">

······

</form>

二.输入标记

<input>标签是表单中的输入标记，它是个单标签。其语法格式如下：

<input name="file_name"  type="type_name">

1.文本框

1),单行文本框

当type的类型为text时，表示该输入项输入的是字符串，输入的内容以单行显示。当type=text时，<input>标签除了有name和type属性外，还有三个可选的属性:value、size、maxlength。value属性用来设定文本框中的初始值，size属性用来设定文本框的长度，maxlength属性用来设定该文本框允许用户输入的最大字符数。其语法格式如下：

<input type="text" name="file_name" maxlength=value size=value value="file_value">

2).密码框

当type的类型为password时，其使用方法与text类似，不同之处是当浏览者输入内容时，均以*表示，以保证密码的安全性。其语法格式如下：

<input type="password" name=“file_name" maxlength=value size=value>

2.按钮

表单中的按钮起着至关重要的作用，它主要有以下几种类型：普通按钮、提交按钮和重置按钮。

1).普通按钮

当type的类型是button时，表示该输入项输入的是普通按钮，其语法格式如下：

<input type="button" name="file_name" value="button_value">

value表示显示在按钮上的文字

2).提交按钮

当type的类型为submit时，表示该输入项输入的是提交按钮，单击提交按钮后，浏览器可以将表单的输入信息传送给服务器。其语法格式如下：

<input type="submit" name="file_name" value="submit_value">

3).重置按钮

当type的类型为reset时,表示该输入项输入的是提交按钮，单击重置按钮后，浏览器可以清除表单中的输入信息而恢复到默认的表单内容设定。其语法格式如下：

<input type="reset" name="file_name" value="reset_value">

一般情况下，提交和重置按钮应该同时出现。

3.单选框和复选框

1).单选框

当type=radio时，表示该输入项是一个单选项，用户只能选择单选项中的一项作为输入信息。其语法格式为：

<input type="radio" name="file_name" checked value="value">

checked表示此项默认选中，value表示选中项目后传送到服务器端的值。

2).复选框

当type=checkbox时，表示该输入项是一个复选项，用户可以同时选中表单中的换一个或多个复选项作为输入信息。其语法格式如下：

<input type="checkbox" name="file_name” checked value="value">

4.文件输入框

当type=file时，表示该输入项是一个文件输入框，用户可以在文件输入框的内部填写自己硬盘中的文件路径，然后通过表单上传。文件输入框的外观是一个单行文本框加一个浏览按钮，用户可以将要上传的文件路径直接填写在单行文本框中，也可以单击浏览按钮进行查找，其语法格式如下：

<input type="file" name="file_name">

三.选择标记

在表单中，通过<select>和<option>标签就可以在浏览器中出现一个下拉式的菜单或带有滚动条的列表菜单。这两个选择标记均可以很好地节省网页的空间。菜单最节省网页空间，正常状态下只能看到一个选项，单击按钮打开菜单后才看到全部选项。列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条。其语法格式如下：

<select name="name" size=value multiple>

<option value="value" selected>选项值

<option value="value" selected>选项值

······

</select>

其中，multiple属性表示列表中的项目多选，size表示显示的选项数目。

当<select>标签中有size属性和multiple属性时，表示是列表；没有时则表示下拉菜单。当然，在列表中，size属性和muliple属性并不一定要同时使用。

四.多行文本框

<textarea>标签用来制作多行文本框，这个标签是个成对标签。其语法格式如下：

<textarea name="name" rows=value cols=value value="value">

其中rows用来设定多行文本框一次能显示的行数，cols用来设定多行文本框一次能显示的列数，value用来设定多行文本框的初始值。

示例：

（一）《HTML学习日记之表单》

（二）

<html>
<head>
<title>表单综合应用示例</title>
</head>
<body>
<form>
<table border="1" align="center">
<tr>
<td colspan="2" bgcolor="blue">
<center>
<font size=7 color="yellow">注册程式</font>
</center>
</td>
</tr>
<tr>
<td>用户名*</td>
<td><input type="text" name="姓名" size="20">不能有空格，
可以是中文，长度控制在3~12字节以内</td>
</tr>
<tr>
<td>密码*</td>
<td><input type="password" name="密码" size="21">英文字母或数字等不少于6位</td>
</tr>
<tr>
<td>确认密码*</td>
<td><input type="password" name="密码" size="21"></td>
</tr>
<tr>
<td>Email*</td>
<td><input type="text" name="电子邮件"><input type=checkbox>公开邮箱</td>
</tr>
<tr>
<td>性别</td>
<td>
<select>
<option value="保密" selected>保密</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<input type=text name="年">年
<select>
<option value="月">1</option>
<option value="月">2</option>
<option value="月">3</option>
<option value="月">4</option>
<option value="月">5</option>
<option value="月">6</option>
<option value="月">7</option>
<option value="月">8</option>
<option value="月">9</option>
<option value="月">10</option>
<option value="月">11</option>
<option value="月">12</option>
</select>
月
<select>
<option value="日">1</option>
<option value="日">2</option>
<option value="日">3</option>
<option value="日">4</option>
<option value="日">5</option>
<option value="日">6</option>
<option value="日">7</option>
<option value="日">8</option>
<option value="日">9</option>
<option value="日">10</option>
<option value="日">11</option>
<option value="日">12</option>
<option value="日">13</option>
<option value="日">14</option>
<option value="日">15</option>
<option value="日">16</option>
<option value="日">17</option>
<option value="日">18</option>
<option value="日">19</option>
<option value="日">20</option>
<option value="日">21</option>
<option value="日">22</option>
<option value="日">23</option>
<option value="日">24</option>
<option value="日">25</option>
<option value="日">26</option>
<option value="日">27</option>
<option value="日">28</option>
<option value="日">29</option>
<option value="日">30</option>
<option value="日">31</option>
</select>
日
</td>
</tr>
<tr>
<td>QQ*</td>
<td><input type="text" name="姓名"></td>
</tr>
<tr>
<td>个人主页</td>
<td><input type="text" name="姓名" value="http://"</td>
</tr>
<tr>
<td>个性化签名<br>将附在每篇文章后</td>
<td>
<textarea name="文本框" rows=6 cols=14></textarea>
</td>
</tr>

<tr>
<td>来自</td>
<td><input type="text"></td>
</tr>
<tr>
<td>自我简介<br>————少于100字节</td>
<td>
<textarea name="文本框" rows=6 cols=14></textarea>
</td>
</tr>
<tr>
<td>是否接受邮件系统</td>
<td><input type="radio" name="city" value="接收邮件" checked>接收邮件
<input type="radio" name="city" value="不接收邮件">不接收邮件
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type="submit" value="提交">
<input type="reset" value="重置"
</td>
</tr>
</table>
</form>
</body>
</html>


运行结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html 博客 表单
相关文章推荐
新的分享
章节导航