html表单---学习笔记03

第8章 表单

8.1 表单标记<form>

<form name="表单名称" method="提交方法" action="处理程序">......</form>

关于表单的更多介绍：http://www.cnblogs.com/polk6/archive/2013/06/08/3124228.html

 

☟ 表单属性：

◆ action：用于指定表单的服务端程序,规定当提交表单时，向何处发送表单数据。action取值为:第一，一个URL（绝对URL/相对URL），一般指向服务器端一个程序，程序接受到表单提交过来的数据（即表单元素值）作相应处理。比如：

 

当用户提交这个表单时，服务器将执行网址"http://i.blog.sina.com.cn//"上的名为"reg.ashx"的一般处理程序。第二，使用mailto协议的URL地址，这样会将表单内容以电子邮件的形式发送出去。这种情况比较少见的，因为它要求访问者的计算机上安装和正确设置好了邮件发送程序。第三，空值，如果action为空或不写，表示提交给当前页面。

 

◆ method：该属性定义浏览器将表单中的数据提交给服务器处理程序的方式。最常用的是get和post，默认时使用 get方法。

get 与 post 有什么区别呢？

① 数据的查询：比如浏览论坛时，URL一般包含了分类、页码数、每页记录数等信息。 get 方式，能一目了然的看到所要查询的信息(条件)。 post 因为隐藏掉了这些信息，不方便进行检验查询条件。

② 敏感数据的提交(安全性)：对一项记录，进行更改、添加操作时，比如注册用户、更改用户资料等。get 方式附加在URL上，会泄露掉敏感的消息。 post 方式，能隐藏掉敏感的信息。

demo:

用get方式点击提交后：URL变为：http://localhost:4778/ashx/login.ashx?login_username=admin&login_pswd=123456

用post方式点击提交后：URL变为：http://localhost:4778/ashx/login.ashx  ☜可看到只是action指定的URL，参数并没有附加在URL后面。

③ 大数据文本传递：get 虽然方便查询，但由于是附加在URL上，各浏览器对URL也有个长度限制。IE ：2048字符。Chrome、FF 好像是 8182字符。post 好像没此限制。

 

◆ onsubmit：用于指定处理表单的脚本函数

◆ enctype：设置MIME类型，默认值为 application/x-www-form-urlencoded。需要上传文件到服务器时，应将该属性设置为 multipart/form-data

 

8.2 输入标记<input>

多数表单元素都可使用 input 定义,为了标识每一个数据，我们需要给表单元素添加name属性，所以name为必设属性，name="域名称"

 

(1)文本框text

输入信息以明文显示

用户名: <input type="text" name="user" />

以下是单行文本框的主要属性:

name(名称，在脚本中可作为标识获取数据),maxlength(设置在文本框中最多可输入的字符数)，size(文本框长度，大约以字节为单位)

value：指定文本框的默认值，是在浏览器第一次显示表单或者用户单击重置按钮之后在文本框中显示的值。

readonly：只读属性，当设置readonly属性后，文本框可以获得焦点，但用户不能改变文本框中的value。

disabled：禁用，当文本框被禁用时，不能获得焦点，当然，用户也不能改变文本框的值。并且在提交表单时，浏览器不会将该文本框的值发送给服务器。

 

(2)密码框 password

以"*"或"●"符号回显所输入的字符，从而起到保密的作用

密码: <input type="password" name="pwd" />

(3)隐藏域 hidden

隐藏域不会被浏览者看到，它主要用于在不同页面传递域中所设定的值

<input type="hidden" name="hid" value="域值">

(4)文件域 file

文件域可以将本地文件上传到服务器端,文件上传没有默认值,利用这项功能时，在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。否则无法上传文件内容

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

(5)单选按钮 radio

在一组选项中进行单项选择，以一个圆框表示

使用方式：要实现单选功能，name值必须相等。使用name相同的一组单选按钮，不同radio设定不同的value值，这样通过取指定name的值就可以知道谁被选中了，不用单独的判断。单选按钮的元素值由value属性显式设置，表单提交时，选中项的value和name被打包发送，不显式设置value。

性别: 男:<input type="radio" name="gender" value="female" checked="checked"> <!-- checked表示此项被默认选中,单复选都适用 -->
女:<input type="radio" name="gender" value="male"/>  <!-- 像这些用户不能填写的表单元素，我们需要设置一些值给用户进行选择。 -->

(6)复选按钮 checkbox

在一组选项中进行多项选择，以一个方框表示

爱好: <input type="checkbox" name="hobby[m1]" value="music"/>音乐
<input type="checkbox" name="hobby[m2]" value="trip"/>旅游
<input type="checkbox" name="hobby[m3]" value="reading"/>阅读

(7)提交按钮 submit

用于将表单内容提交到指定服务器处理程序或指定客户端脚本进行处理

<input type="submit" name="按钮名称" value="按钮显示文本">

普通按钮 button

用于激发提交表单动作，配合JavaScript脚本对表单执行处理操作

<input type="button" value="按钮显示文本" onclick="javascript函数名" name="按钮名称">

重置按钮 reset

用于清楚表单中所输入的内容，将表单内容恢复成默认的状态

<input type="reset" name="按钮名称" value="按钮显示文本">

图像按钮 image

按钮外形以图像表示，功能与提交按钮一样，具有提交表单内容的作用

<input type="image" name="按钮名称" src="图像路径" width="宽" height="高">

(8)选择列表标记<select>

8.1 选择列表：一次可以选择多个列表选项，且一次可以显示1个以上列表选项的选择列表

select 标记用于声明选择列表，option标记用于设置各个选项

<select name="列表名称" size="显示的选项数目(默认为1)" multiple="multiple"><!-- multiple设置列表中的项目可多选 -->
<option value="banana" selected="selected">香蕉</option><!-- selected设置默认选项，可设置多个 -->
<option value="apple">苹果</option>
<option value="watermelon" selected="selected">西瓜</option>
<option value="grape" selected="selected">葡萄</option>
</select>

8.2 下拉列表：一次只能选择一个列表选项，且一次只能显示一个列表选项的选择列表，即size默认1不能设置 size和 multiple属性

<select name="area">
<optgroup label="国外"> <!-- <optgroup> 标签用于组合选项，即给选项分组类别,属性为label,指定选项组合名称 -->
<option value="1">华盛顿</option>
<option value="2">旧金山</option>
</optgroup>
<optgroup label="国内">
<option value="3">广州</option>
<option value="4">湛江</option>
</optgroup>
</select>

(9)文本域标记<textarea>

一般用于给用户填写备注信息或留言信息的多行多列文本区域

<textarea name="文本区域名称" rows="行数" cols="字符数">
...(此处输入的为默认文本，比如)请在此处输入备注信息
</textarea>

 

(10)<label> 标签:为 input 元素定义标注（标记）

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

注意："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。即为下面说的隐式的联系。

 

隐式和显式的联系：

标记通常以下面两种方式中的一种来和表单控件相联系：将表单控件作为标记标签的内容，这样的就是隐式形式，或者为 <label> 标签下的 for 属性命名一个目标表单 id，这样就是显式形式。

显式的联系：

<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

隐式的联系：

<label>Date of Birth: <input type="text" name="DofB" /></label>

(11)fieldset 标签：把表单中元素组合起来，通俗的讲就是把表单围起来，顺便给个标题注释，看起来更规整。

基本语法：<fieldset> <legend>...</legend> <form>...</form> </fieldset>

demo：

<fieldset>
<legend>我最喜爱的:</legend>
<label for="computer">计算机</label> <input type="checkbox" value="1" id="fav" name="fav" />
<label for="trval">旅游</label> <input type="checkbox" value="2" id="fav" name="fav" />
<label for="buy">购物</label> <input type="checkbox" value="3" id="fav" name="fav" />
</fieldset>

我最喜爱的:

计算机 旅游 购物