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 |
|
当页面加载时,使输入字段获得焦点。
注释:type="hidden" 时,无法使用。
|
|
5 |
checked |
|
指示此 input 元素首次加载时应当被选中。
注释:请与 type="checkbox" 及 type="radio" 配合使用。
|
4 |
5 |
disabled |
|
当 input 元素首次加载时禁用此元素,这样用户就无法在其中写文本,或选定它。
注释:不能与 type="hidden" 一同使用。
|
4 |
5 |
form |
|
定义输入字段属于一个或多个表单。 |
|
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 |
|
定义输入字段的值是否是必需的。
当使用下列类型时无法使用: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 |
|
在页面加载时使这个 select 字段获得焦点。 |
|
5 |
data |
url |
供自动插入数据。 |
|
5 |
disabled |
|
当该属性为 true 时,会禁用该菜单。 |
4 |
5 |
form |
|
定义 select 字段所属的一个或多个表单。 |
|
5 |
multiple |
|
当该属性为 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 |
|
在页面加载时,使这个 textarea 获得焦点。 |
|
5 |
cols |
number |
规定文本区内可见的列数。 |
4 |
5 |
disabled |
|
当此文本区首次加载时禁用此文本区。 |
4 |
5 |
form |
|
定义该 textarea 所属的一个或多个表单。 |
|
5 |
inputmode |
inputmode |
定义该 textarea 所期望的输入类型。 |
|
5 |
name |
name_of_textarea |
为此文本区规定的一个名称。 |
4 |
5 |
readonly |
|
指示用户无法修改文本区内的内容。 |
4 |
5 |
required |
|
定义为了提交该表单,该 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;
?>
输出结果:
程序代码
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" onchange="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>
分享到:
相关推荐
《疯狂html 5/css 3/javascript讲义》是一本全面介绍html 5、css 3和javascript前端开发技术的图书,系统地介绍了html 5常用的元素和属性、html 5的表单元素和属性、html 5的绘图支持、html 5的多媒体支持、css 3的...
3.1 HTML原有的表单及表单控件 73 3.2 HTML 5新增的表单属性 83 3.3 HTML 5新增的表单元素 90 3.4 HTML 5新增的客户端校验 96 3.5 本章小结 100 第4章 HTML 5的绘图支持 101 4.1 使用canvas元素 102 4.2 ...
【前端 HTML+CSS+JavaScript(JS)】DOM练习-onkeydown键盘事件-用wasd移动图片的位置 带注释/总结 【前端 HTML+CSS+JavaScript(JS)】DOM练习-onmouseover事件 鼠标悬浮切换图片 带注释/总结 【前端 ...
html5css3 揭秘HTML5和CSS3 HTML5新增和移除的元素 HTML5基本布局 HTML5对表单的支持 HTML5 DOM变化 HTML5的
《疯狂HTML 5/CSS3/JavaScript讲义》是一本全面介绍HTML 5、CSS3和JavaScript前端开发技术的图书,系统地介绍了HTML 5常用的元素和属性、HTML 5的表单元素和属性、HTML5的绘图支持、HTML 5的多媒体支持、CSS3的功能...
第3章 HTML 5表单相关元素和属性 第4章 HTML 5的绘图支持 第5章 HTML 5的多媒体支持 第二部分 第6章 级联样式单与CSS选择器 第7章 字体与文本相关属性 第8章 背景、边框和补丁相关属性 第9章 大小、定位、...
工作在网站顾问公司(www.clearleft.com)的Jeremy 喜欢使用Web标准的三驾马车来构建易于访问的、设计考究的网站:XHTML,CSS和DOM。个人在线地址是adactio.com。Jeremy 同时也是Web标准项目 (webstandards.org)的一个...
HTML5新增和移除的元素 HTML5基本布局 HTML5对表单的支持 HTML5 DOM变化 HTML5的Javascript APIs Canvas Video/Audio Drag&Drop Geolocation Application Cache Database Storage X-Document Messaging
1HTML常见文本标签 2HTML属性 3HTML块元素与行内元素 4HTML表单 2.CSS 5CSS导入方式 6CSS选择器 7CSS常见属性 8CSS盒子模型 9CSS浮动 10CSS定位 3.JavaScript 11JS导入方式 12JS基本语法 13JS函数 14JS事件 15JSDOM ...
(2)使用表单和控件的常用DOM属性、方法、事件进行表单前端验证1次和其他功能1次。 (3)使用BOM调用浏览器功能1次,例如页面滚动、秒杀倒计时、打印、通知、本地存储等。 (4)使用ECharts库(https://echarts.apache.org...
其中,HTML模块涵盖了HTML基础语法、HTML5的新增功能以及表单设计和验证。CSS模块涵盖了CSS选择器和属性、各种布局技术,包括Flexbox和Grid,以及响应式设计原理。JavaScript模块包含了JavaScript语法和数据类型、...
HTML5和css3入门开发资料 HTML5新增和移除的元素 HTML5基本布局 HTML5对表单的支持 HTML5 DOM变化 HTML5的Javascript APIs Canvas Video/Audio Drag&Drop; Geolocation Application Cache Database Storage X-...
本书是一本全面介绍HTML 5、CSS 3和JavaScript前端开发技术的图书,系统地介绍了HTML 5常用的元素和属性、HTML 5的表单元素和属性、HTML 5的绘图支持、HTML 5的多媒体支持、CSS 3的功能和用法、最前沿的变形与动画...
本书是一本全面介绍HTML 5、CSS 3和JavaScript前端开发技术的图书,系统地介绍了HTML 5常用的元素和属性、HTML 5的表单元素和属性、HTML 5的绘图支持、HTML 5的多媒体支持、CSS 3的功能和用法、最前沿的变形与动画...
文本输入框做了 required 必须填写条件,运用在项目中可以通过 JavaScript 约束验证 DOM 方法checkValidity()、setCustomValidity()等做异常处理。 注册界面设计 注册界面由一个简单的表单(Email、用户名、密码、...
3.5.1 DOM2 HTML 的HTMLDocument对象 3.5.2 DOM2 HTML 的HTMLElement对象 3.6 实例:将手工HTML代码转换为DOM代码 3.6.1 DOM生成工具的HTML文件 3.6.2 使用示例HTML片段进行测试 3.6.3 ...
•新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 •减少对外部插件的需求(比如 Flash) •更优秀的错误处理 •更多取代脚本的标记 •HTML5 应该独立于设备 •开发进程应对公众透明 新特性 HTML5 中的一些有趣的...
JS-CSS-基于类的验证 通过向 DOM 元素添加类来创建表单验证
DOM操作的分类:DOM CORE(核心)、HTML-DOM和CSS-DOM 1. DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它。 它的用途并非仅限于处理网页,也可以用来处理任何一种使用标记语言...
1.HTML常用标记超链接表格表单 2.HTML常用标题段落等标记 3.相关概念及HTML语法 4-CSS语法部分选择符 5-CSS部分选择符及选择符权重 6-CSS部分文本属性上 7-CSS部分文本属性下 8-CSS列表背景属性 9-CSS背景及浮动属性...