表单

来源：互联网发布：单仁网络传销编辑：程序博客网时间：2024/09/21 08:56

通俗的讲，表单就是一个将用户信息组织起来的容器。将需要用户填写的内容放置在表单容器中，当用户点击“提交”按钮时，表单会将数据统一发送给服务器。

典型的应用场景：登录注册、网上订单信息填写、调查问卷、搜索。

HTML 表单标签：

标签描述<form>定义供用户输入的表单<input>定义输入域<textarea>定义文本域 (一个多行的输入控件)<label>定义了 <input> 元素的标签，一般为输入标题<fieldset>定义了一组相关的表单元素，并使用外框包含起来<legend>定义了 <fieldset> 元素的标题<select>定义了下拉选项列表<optgroup>定义选项组<option>定义下拉列表中的选项<button>定义一个点击按钮<datalist>New指定一个预先定义的输入控件选项列表<keygen>New定义了表单的密钥对生成器字段<output>New定义一个计算结果

常见的表单元素：

表单基本结构--<form>标签

语法：

<form action="表单提交地址" method="提交方法">文本框、按钮等表单元素…    </form>

注意：

action属性：如果为空则代表向当前页面提交

method属性：可选值 post、get

get方法提交参数在地址栏可见
post方法一般用于多数据、保密数据提交

表单基本元素-<input>标签

多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。

语法：

<input   name="表单元素名称" type="类型" value="值" size="显示宽度" maxlength=“最大长度" checked="是否选中"  />

注意 :

type属性：可选值 text （默认）、password、button、checkbox、radio等

checked属性：仅与<input type="checkbox"> 或<input type="radio"> 配合使用，选中值为checked

HTML 表单 - 输入元素：

type功能例子text单行文本输入<input type="text" name="username" />password密码<input type="password" name="password" />radio单选

<input type="radio" name="gender" value="male" />男

<input type="radio" name=" gender" value="female" />女

checkbox 多选

<input type="checkbox" name="hobby" value="reading" /> 阅读

<input type="checkbox" name="hobby" value="drawing" />绘画

button 普通按钮<input type="button" value="播放音乐" />reset重置表单数据<input type="reset" value="重置" />submit 提交表单数据<input type="submit" value="提交" />file 文件上传<input type="file" name="files" />hidden 隐藏域（数据隐藏提交）<input type="hidden" name="name" value="1" />

PS：

HTML <input> value 属性：

value 属性规定 <input> 元素的值。

value 属性对于不同 input 类型，用法也不同：

对于 "button"、"reset"、"submit" 类型 - 定义按钮上的文本
对于 "text"、"password"、"hidden" 类型 - 定义输入字段的初始（默认）值
对于 "checkbox"、"radio"、"image" 类型 - 定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL。

注意：value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的。
注意：value 属性不适用于 <input type="file">。

在后台如果你想得到复选框的内容就是value 来取。
当你在接收表单数据的页面中获取数据时，得到的就是value的值。

name-value：

name是控件的名称（多个控件可以取同一个名称），value是控件的值
并不是所有控件的 value 都会显示出来，比如 checkbox, radio, hidden
定义控件的 name 和 value 就可以在服务器上获取这个控件和它的值
没看到 submit 的 name，并不表示浏览器忽略了它的 name，在提交之前它也被浏览器定义了 name，在服务器上一样可以得到它的 name 和 value
控件不定义 name / value 也可以显示，只是为了方便在服务器接收和区别，才定义它的 name/value，当然按钮的 value 不光是存放它的值，也用来显示

列表框

<select name="指定列表名称"   size="显示的行数">     <option  value="选项值"    selected="selected">…</option>     <option  value="选项值" >…</option></select>

文本域

<textarea name="... "  cols="列宽"  rows="行宽">      文本内容</textarea>

表单的高级用法2-1

关联表单元素（表单元素的标注）

语法：

<label   for="关联元素ID"> </label>

示例_点击 label 标签鼠标聚焦文本框中：

<label for="username">姓名: </label><input  name="name" id="username"  size="20"/>

或

<label >姓名:<input  name="name"  size="20"/> </label>

表单的高级用法2-2

只读属性

readonly：希望某个框内的内容只允许用户看，不能修改

禁用属性

disabled：因没达到使用的条件，限制用户使用

示例：

用户须知：<textarea readonly="readonly">用户需遵循以下协定： xxxxx</textarea><input type="submit" name="register" value="注册" disabled="disabled"/>

附Demo代码及显示效果：

1.普通表单

<!doctype html><html><head><meta charset="utf-8"><title>表单</title></head><body><form action="" method="post"><!--文本框、密码框--><p>用户名：<input name="name" type="text" value="Fatli" /></p><p>密 码：<input name="password" type="password" /></p><!--单选按钮、复选框--><p>性别：<input name="gender" type="radio" value="man" />男 <input name="gender" type="radio" value="woman" />女 <!--对表单元素进行标注（增强鼠标的可用性）--><input name="gender" type="radio" value="anthor" id="anthor" /><label for="anthor">其他</label></p><p>爱好：<input name="insterest" type="checkbox" value="sports" checked="checked"/>运动<input name="insterest" type="checkbox" value="it" />IT<input name="insterest" type="checkbox" value="it" />音乐</p><!--列表框--><p>出生日期：<input name="birthYear" size="2" maxlength="4" />年 <select name="birthMonth"><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>月 <input name="birthDay" size="2" maxlength="4" />日  </p><!--按钮--><p><input type="button" name="butButton" value="button按钮" onClick="alert(this.value)"><input type="submit" name="butSubmit" value="submit按钮"><input type="reset" name="butReset" value="reset按钮"></p></form></body></html>

2.多行文本域

<!--多行文本域--><form action="" method="post"><p>自我评价：<br /><textarea name="textarea" cols="10" rows="2"></textarea></p></form>

3.文件域

<!--文件域--><!--提交包含文件域的表单时，由于提交的表单数据包括普通的表单数据、文件数据等多部分内容，所以必须设置表单的 "enctype" 编码属性为 "multipart/form-data"，表示将表单数据分为多部分提交--><form action="" method="post" enctype="multipart/form-data"><p><input type="file" name="files" /><br /><input type="submit" name="upload" value="上传" /></p></form>

4.隐藏域（表单数据隐藏提交，用 method="get" 提交可以在地址栏看到提交的参数）

<!--隐藏域--><form action="" method="get"><!--文本框、密码框--><p>用户名：<input name="name2" type="text" /></p><p>密 码：<input name="password2" type="password" /></p><p><input type="submit" value="提交" /></p>//将隐藏域的 name 属性命名为 userid，而 value 属性的值就对应为用户的 userid<p><input type="hidden" name="userid" value="666" /></p></form>

5.表单的只读与禁用

<!--表单的只读（eg协议）与禁用（eg先同意协议再注册）设置--><form action="" method="get"><p>用户名：<input type="text" name="name3" value="Xenia(只读)" readonly /></p><p>用户须知：<br /><textarea cols="20" rows="10" readonly>用户需遵循以下协定（Fatli CO.,LTD.保留最终解释权）：一、xxxxx二、xxxxx</textarea></p><p><input type="submit" name="register" value="注册" disabled="disabled"></p></form>

6.语义化的表单

<!--语义化的表单:页面结构更合理、见名知义、更符合Web标准-SEO优化--><!--未使用语义化的标签--><table>学生信息表<br /><tr><td>姓名</td><td>职务</td></tr><tr><td >张三</td><td >班长</td></tr></table><!--使用语义化的标签--><table width="270"><caption>学生信息表</caption><thead><tr><th>姓名</th><th>职务</th></tr></thead><tbody><tr><td align="center">张三</td><td align="center">班长 </td></tr></tbody></table><br /><!--未语义化的表单--><form>用户信息：<br />姓名：<input type="text" />年龄：<input type="text" /><br />手机：<input type="text" />邮箱：<input type="text" /></form><br /><!--语义化的表单--><form><fieldset><legend>用户信息：</legend>姓名：<input type="text" />年龄：<input type="text" /><br />手机：<input type="text" />邮箱：<input type="text" /></fieldset></form>

======================================================优雅的分割线=================================

——END

0 0