web表单

web表单

(2012-07-10 17:48:28)

转载▼

标签： 表单 web表单 it

分类： html、css、js、php

Web表单

Web表单的功能是让浏览者和网站有一个互动的平台。Web表单主要用来在网页中发送数据到服务器。
1.创建表单
<form name=”form1” method=”post” action=”index.php” enctype=”value” target=”_top”>
</form>

<form>标记的属性有：

name	表单的名称
method	表单提交方法，有get或post两种
action	指向处理该表单的url（相对或绝对）
enctype	设置表单内容的编码方式
target	设置返回信息的显示方式：_blank，_parent，_self，_top

_blank	将返回的信息显示在新的窗口中
_parent	将返回的信息显示在父级窗口中
_self	将返回的信息显示在当前窗口中
_top	将返回的信息显示在顶级窗口中

说明：get方法是将表单内容附加在URL地址后面；post应运是将表单中的信息作为一个数据块发送到服务器上的处理程序中，在浏览器的地址栏不显示提交的信息。method属性默认方法为get方法。
例如，创建一个表单，再以post方法提交到数据处理页check_ok.php，代码如下：
<form name=”form1” method=”post” action=”check_ok.php>
<form>

2.表单元素
1）输入域标记：<input>
语法：<form>
      <input name=”file_name” type=”type_name”>
      </form>
参数name是指输入域的名称，参数type是指输入域的类型。一共有10种类型，如下表所示：

值	举例	说明	运行结果
test	<input name="user" type="text" value="请输入文字" size="12" maxlength="1000">	name为文本框的名称，value是文本框的值，size指文本框的宽度（以字符为单位），maxlength指文本框的最大输入字符数。
password	<input name="pwd" type="password" value="8888" size="12" maxlength="16">	密码域，用户在该文本框输入的字符会以*号或圆点显示，起到保密作用
file	<input name="file" type="file" enctype="multipart/form-data" size="16" maxlength="200">	文件域，当文件上传时，可用来打开一个模式窗口以选择文件。然后将文件通过表单上传到服务器，如上传word文档等各种类型的文件，注意：上传文件时需要指明表单的属性enctype=”mulpart/form-data”才能实现上传。
image	添加一个图像域： <input name="imagefield" type="image" src="fProxy.jpg" width="30" height="15" border="0">	图像域是指可以用在提交按钮位置上的图片，这幅图片具有按钮功能。
radio	<input name="sex" type="radio" value="1" checked>男 <input name="sex" type="radio" value="0" >女	单选按钮，用于设置一组选择项，用户只能选择其中一项，checked属性用来设置该单选按键时被选中。
checkbox	<input name="checkbox" type="checkbox" value="1" checked> 封面<br> <input name="checkbox" type="checkbox" value="0"> 正文内容<br> <input name="checkbox" type="checkbox" value="0" > 价格<p>	复选框，允许用户选择多个选项。checked属性用来设置该复选框默认被选中。例如：收集个人信息时，要求在个人爱好中进行多项选择。
submit	<input name="submit" type="submit" value="提交">	将表单的内容提交到服务器端
reset	<input name="reset" type="reset" value="重置">	清除与重置表单内容，用于清除表单中所有文本框的内容，而且使用选择菜单项恢复到初始值。
button	<input name="button" type="button" value="按钮"><p>	按钮可以激发提交表单的动作，可以在用户需要修改表单时，将表单恢复到初始的状态，还可以依照程序的需要发挥其它的作用。普通按钮一般是配合javascript脚本进行表单处理的。
hidden	<input name="bookid" type="hidden">	隐藏域，用于在表单中以隐含方式提交变量值。隐藏域在页面中对于用户而言是不可见的，添加隐藏域的目的在于通过隐藏的方式收集或者发送信息。浏览者单击“发送”按钮发送表单时，域的信息也一起被发送到action的指定处理页。	没有显示

选择域标记<select>和<option>

通过选择域标记<select>和<option>可以建立一个列表或者菜单。菜单的使用是为了节省空间，常状态下只能看到一个选项，单击右侧的下三角按钮打开菜单后才能看到全部的选项。列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来查看各选项。

语法：

<select>

  <option value="value" selected>选项1</option>

  <option value="value">选项2</option>

  <option value="value">选项3</option>

  ……

</select>

 

参数name表示选择域的名称；参数size表示列表的行数；参数value表示菜单选项值；参数multiple表示以菜单方式显示数据，省略则以列表显示数据。

选择域标记如下表

 

显示方式	举例	说明	运行结果
列表方式	<select name="spec" id="spec">   <option value="0" selected>网络编程</option>   <option value="1">办公自动化</option>   <option value="2">网页设计</option>   <option value="2">网页美工</option> </select>	下拉列表框，通过选择标记<select>和<option>建立一个列表，列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来查看各选项。selected属性用来设置该菜单项时默认被选中
下拉菜单方式	<select name="spec" id="spec" multiple>   <option value="0" selected>网络编程</option>   <option value="1">办公自动化</option>   <option value="2">网页设计</option>   <option value="2">网页美工</option> </select>	multiple属性用于下拉列表<select>标记中，指定该选项用户可以使用Shift和Ctrl键进行多选。

 

 

3.文字域标记<textarea>

文字域标记<textarea>用来制作多行的文字域，可以在其中输入更多的文本。

语法：

<textarea name=”name” rows=value cols=value value=”value” wrap=”value”>

  文本内容

</textarea>

参数name表示文字域的名称；rows表示文字域的行数；cols表示文字域的列数（这里的rows和cols以字符为单位）；value表示文字域默认值。wrap用于设定显示和送出时的换行方式，值为off表示不自动换行；值为hard表示自动硬回车换行，换行标记一同被发送到服务器，输出时也会换行；值为soft表示自动软换行，换行标记不会被发送到服务器，输出时仍然为一列。

值	举例	说明	运行结果
textarea	<textarea name="remark" rows="4" cols="20" id="remark">     请输入您的建议！ </textarea>	文本域，也称多选文本框，用于多选文本的编辑，wrap属性默认自动换行方式