html表单，css,dom

form属性

action	定义一个 URL。当点击提交按钮时，向这个 URL 发送数据。	4	5
data	供自动插入数据。		5
replace	定义表单提交时所做的事情。		5
accept	处理该表单的服务器可正确处理的内容类型列表（用逗号分隔）。	4	5
accept-charset	表单数据的可能的字符集列表（逗号分隔）。默认值是 "unknown"。	4	5
enctype	用于对表单内容进行编码的 MIME 类型。	4	5
method	用于向 action URL 发送数据的 HTTP 方法。默认是 get。	4	5
name	为表单定义一个唯一的名称。不支持。用 id 代替。	4
target	在何处打开目标 URL。_blank弹出窗口	4	5

上传数据 enctype="multipart/ form-data

常用表单：

input type="checkbox"
复选框，允许用户选择多个选择项

input type="file"
文件浏览框，当文件上传时，可用来打开一个模式窗口以选择文件

input type="hidden"
隐藏标签，用于在表单中以隐含方式提交变量值

input type="password"
密码文本框，用户在该文本框输入字符时将被替换显示为 * 号

input type="radio"
单选项，用于设置一组选择项，用户只能选择一个

input type="reset"
清除与重置表单内容，用于清除表单中所有文本框的内容，而且使选择菜单项恢复到初始值

input type="submit"
表单提交按钮

input type="text"
单行文本框

select
下拉列表框，可单选和多选。默认为单选，如果增加多项选择功能，增加 <select name="select" size=" 自定义列数 " multiple="multiple"> 即可

option
列表下拉菜单，和 select 配合使用，显示供选择的值

textarea
多行文本框，在使用文本框时需要关闭标签之间的文本内容，形成如下格式：
<Textarea> 你的文字

表单input属性：

属性	值	描述	4	5
accept	list_of_mime_types	一个逗号分隔的 MIME 类型列表，指示文件传输的 MIME 类型。注释：仅可与 type="file" 配合使用。	4	5
align	left right top texttop middle absmiddle baseline bottom absbottom	定义图像之后的文本对齐方式。 不支持，请使用 CSS 代替。	4
alt	text	定义图像的替代文本。 注释：仅可与 type="image" 配合使用。	4	5
autocomplete				5
autofocus	true false	当页面加载时，使输入字段获得焦点。 注释：type="hidden" 时，无法使用。		5
checked	true false	指示此 input 元素首次加载时应当被选中。 注释：请与 type="checkbox" 及 type="radio" 配合使用。	4	5
disabled	true false	当 input 元素首次加载时禁用此元素，这样用户就无法在其中写文本，或选定它。 注释：不能与 type="hidden" 一同使用。	4	5
form	true false	定义输入字段属于一个或多个表单。		5
inputmode	inputmode	定义预期的输入类型。		5
list	id of a datalist	引用 datalist 元素。如果定义，则一个下拉列表可用于向输入字段插入值。		5
max	number	输入字段的最大值。		5
maxlength	number	定义文本域中所允许的字符最大数目。	4	5
min	number	输入字段的最小值。		5
name	field_name	为 input 元素定义唯一的名称。	4	5
pattern				5
readonly	readonly	指示是否可修改该字段的值。	4	5
replace	text	定义当表单提交时如何处理该输入字段。		5
required	true false	定义输入字段的值是否是必需的。 当使用下列类型时无法使用：hidden, image, button, submit, reset		5
size	number_of_char	定义 input 元素的大小。不再支持。	4
src	URL	定义要显示的图像的 URL。 仅用于 type="image" 时。	4	5
step				5
template	template	定义一个或多个模板。		5
type	button checkbox date datetime datetime-local email file hidden image month number password radio range reset submit text time url week	指示 input 元素的类型。 默认值是 "text" 注释：该属性不是必需的。但是我们认为应该使用它。	4	5
value	value	对于按钮、重置按钮和确认按钮：定义按钮上的文本。 对于图像按钮：定义传递向某个脚本的此域的符号结果。 对于复选框和单选按钮：定义 input 元素被点击时的结果。 对于隐藏域、密码域以及文本域：定义元素的默认值。 注释：不能与 type="file" 一同使用。 注释：与 type="checkbox" 和 type="radio" 一同使用时，此元素是必需的。

表单select属性：

属性	值	描述	4	5
autofocus	true false	在页面加载时使这个 select 字段获得焦点。		5
data	url	供自动插入数据。		5
disabled	true false	当该属性为 true 时，会禁用该菜单。	4	5
form	true false	定义 select 字段所属的一个或多个表单。		5
multiple	true false	当该属性为 true 时，规定可一次选定多个项目。	4	5
name	unique_name	定义下拉列表的唯一标识符。	4	5
size	number	定义菜单中可见项目的数目。不支持。	4

表单option属性：

属性	值	描述	4	5
disabled	disabled	规定此选项应在首次加载时被禁用。	4	5
label	text	定义当使用 <optgroup> 时所使用的标注。	4	5
selected	selected	规定选项（在首次显示在列表中时）表现为选中状态。	4	5
value	text	定义送往服务器的选项值。	4	5

表单textarea属性：

属性	值	描述	4	5
autofocus	true false	在页面加载时，使这个 textarea 获得焦点。		5
cols	number	规定文本区内可见的列数。	4	5
disabled	true false	当此文本区首次加载时禁用此文本区。	4	5
form	true false	定义该 textarea 所属的一个或多个表单。		5
inputmode	inputmode	定义该 textarea 所期望的输入类型。		5
name	name_of_textarea	为此文本区规定的一个名称。	4	5
readonly	true false	指示用户无法修改文本区内的内容。	4	5
required	true false	定义为了提交该表单，该 textarea 的值是否是必需的。		5
rows	number	规定文本区内可见的行数。	4	5

特殊用法：label标签 for属性

编写动态生成radio的函数

程序代码

<?php
//函数体
function generate_radio_group($name,$options,$default){
$name = htmlentities($name);
foreach ($options as $value => $labls){
$value = htmlentities($value);
$html .="<input type=\"radio\" ";
$html .= "name=\"$name\" value=\"$value\" ";
if ($value == $default){
$html .= "CHECKED";
}
$html .=">";
$html .=$labls."<br>";
}
return ($html);
}
//初始化数据
$options = array('010'=>'北京',
'022'=>'天津',
'024'=>'沈阳',
'020'=>'上海',
);
$default = '022';
//调用函数
$html = generate_radio_group('city',$options,$default);
//输出内容
echo $html;
?>

表单的处理方法

来看几个PHP全局数组：

程序代码

<?php
$action = $_SERVER['PHP_SELF'];
echo $action."<br>";
$name = $_SERVER['SERVER_NAME'];
echo $name."<br>";
$ref = $_SERVER['HTTP_REFERER'];
echo $ref;
?>

输出结果：

程序代码

/chap5/test.php
http://127.0.0.1/chap5/
127.0.0.1

HTTP_REFERER 保存一个完整的来源URL地址。
SERVER_NAME 当前的服务器名称。
PHP_SELF 当前脚本的完整路径，包括文件名。

看一个防止站外提交数据的例子：

程序代码

<?php
$action = $_SERVER['PHP_SELF'];//当前脚本的完整路径，包括文件名
if ($_SERVER['REQUEST_METHOD'] == 'POST'){//判断表单提交方法
$ref = $_SERVER['HTTP_REFERER'];//存一个完整的来源URL地址
$srv =" http://{$_SERVER['SERVER_NAME']}$action";//获取服务器名称.$action一个完整的URL
echo "客户端：$ref<br>服务端:$srv<hr>";

if (strcmp($ref,$srv == 0)){//利用strcmp函数判断两者是否相同
echo "合法提交";
}else{
echo "非法提交";
}
}else{
echo "请提交表单！";
}
?>
<form action="<?php echo $action;?> " method="post">
<input type="submit" value="sumbit">
</form>

一个综合的例子：

form.htm

HTML代码

<html>
<head>
<meta http-equiv="Content-Language" content="gb2312" />
<meta name="GENERATOR" content="Zend Studio" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>title</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#FF9966" vlink="#FF9966" alink="#FFCC99">
<form action="someform.php" method="post">

<table width="541" border="0">

<tr>

<td width="26%">姓名：</td>

<td width="74%"><input type="text" name="username" value="raymond" id="username" /></td>

</tr>

<tr>

<td>密码：</td>

<td><input type="password" name="password" maxlength="10" id="password" /></td>

</tr>

<tr>

<td>年龄：</td>

<td>

<select name="age">

<option value=">16">小于16</option>

<option value="16-30" selected>16-30</option>

<option value="31-50">31-50</option>

<option value="51-80">51-80</option>

</select>

</td>

</tr>

<tr>

<td valign="top">自我介绍:</td>

<td><textarea name="intro" rows="3" cols="50" id="intro">请输入您的自我介绍</textarea></td>

</tr>

<tr>

<td><br />

体育爱好： </td>

<td><input type="radio" name="fave_sport" value="tennis" checked>

网球

<input type="radio" name="fave_sport" value="football">

足球

<input type="radio" name="fave_sport" value="baseball">

篮球

<input type="radio" name="fave_sport" value="polo">

保龄球 </td>

</tr>

<tr>

<td> 开发语言：</td>

<td><input name="from" type="hidden" id="from" value="注册表单">

<input type="checkbox" name="languages[]" value="php" checked id="languages[]">

php

<input type="checkbox" name="languages[]" value="java" id="languages[]">

java

<input type="checkbox" name="languages[]" value="perl" id="languages[]">

perl

<input type="checkbox" name="languages[]" value="cpp" id="languages[]">

c++

<input type="checkbox" name="languages[]" value=".net" id="languages[]">

.NET

<input type="checkbox" name="languages[]" value="delphi" id="languages[]">

delphi </td>

</tr>

<tr>

<td valign="top"><br>

<label> 开发工具：</label></td>

<td><select name="develop_ide[]" size="5" multiple id="develop_ide[]">

<option value="ZDE" selected>Zend Studio</option>

<option value="Eclipse">Eclipse</option>

<option value="Editplus">Editplus</option>

<option value="Ultraedit">Ultraedit</option>

<option value="Other">Other</option>

</select></td>

</tr>

<tr>

<td valign="top"> </td>

<td><input type="submit" name="btn_submit" value="提交" /></td>

</tr>

</table>

</form>
</body>
</html>
someform.php

程序代码

<?php

//通过判断按钮的变量名是否在$_POST中定义，如果有表示该表单已提交
if(isset($_POST["btn_submit"])){
if (empty($_POST['username'])){
echo "您没有输入用户名";
exit(0);
}
if (empty($_POST['password'])){
echo "您没有输入密码: ";
exit(0);
}
echo "您的用户名： ".$_POST['user_name']."<br />";
echo "您的密码(明文)： ".$_POST['password']."<br />";
echo "您的年龄： ".$_POST['age']."<br />";
if (!empty($_POST['languages'])){
echo "您选择的语言为：";
//处理用户选择兴趣的checkbox按钮产生的数组
foreach ($_POST['languages'] as $lang){
echo $lang. " ";
}
} else {
echo "您没有输入任何兴趣爱好";
}
if (!empty($_POST['develop_ide'])){
echo "您使用的开发工具为：";
//处理用户多选开发工具菜单产生的数组
foreach ($_POST['develop_ide'] as $ide){
echo $ide. " ";
}
} else {
echo "您没有选择开发工具";
}
echo "您的自我介绍： ".nl2br($_POST['intro'])."<br />";
echo "网页隐藏值(通过hidden标签值传递)： ".$_POST['from']."<br />";
}
?>

form 表单的DOM与样式控制

1 this.selectedIndex 这个是所选择的select所属的options的下标，就是说选择的是第几个option,第一个是0

2 得到一个select标签中的option选项中的value值和text的值，有两种方式：

1)最好是采用名字的方式

例如：var vaule_option1 = document.free.free_select.value;

但是不能使用document.free.free_select.text得到text值

form 里面的其它的非块级标签最好是用name,块级标签最好是用id，然后样式最好是用
class来定义

2) 使用参数传递的this和.selectedIndex

例如 this.options[this.selectedIndex].value;同时this.options[this.selectedIndex].text也是好用的

3 同样可以使用var input_element=getElementsByName("free_input");
var value_option3 = input_element[0].value;
得到vaule的值option3

注意：getElementsByName();得到的是数组对象类型，所以要使用下标的方式才能得到具体的元素

4 option下拉列表宽度的控制是在select中定义样式控制的

例如 select{width:100px}

5 this.options.length是select下option元素的个数，常用作删除

例如 for(var i=this.options.length-1;i>=0;i--){
this.remove(i);//this是要删除的select元素可以documenet.getElementById()来得到或通过this传值
}

6 向空的select中添加option的最简单的方法是
doucment.getElementById('id').options.add(new Options(text,value));
也可以使用标准的dom操作，有时间能一下

也可以使用rel.options[i]=new Option(text,value)的方式

new Option(text.value)添加option的文字和value的值

7 使用document.free.elements['free-select'] 来得到对应的元素，然后document.free.elements['free-select'].value就可以得到这个元素的值，docuemnt.free.elememts得到的是这个表单的所有的元素


html代码
<form name="free">
<select name="free_select" οnchange="red(this)" id='free-select'>
<option vaule="option1">aa</option>
<option vaule="option2">bb</option>
</select>
<input type="text" name="free_input" value="option3" />
</form>

js代码
<script type="text/javascript">
function red(rel){
}
</script>