`
happmaoo
  • 浏览: 4308868 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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" 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、css 3和javascript前端开发技术的图书,系统地介绍了html 5常用的元素和属性、html 5的表单元素和属性、html 5的绘图支持、html 5的多媒体支持、css 3的...

    疯狂HTML 5+CSS 3+JavaScript讲义(第2版)+源代码

    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 ...

    DOM练习-onkeydown事件--onmouseover事件-左侧菜单栏点击收放-图片切换-checkbox全选-表单校验

    【前端 HTML+CSS+JavaScript(JS)】DOM练习-onkeydown键盘事件-用wasd移动图片的位置 带注释/总结 【前端 HTML+CSS+JavaScript(JS)】DOM练习-onmouseover事件 鼠标悬浮切换图片 带注释/总结 【前端 ...

    html5和css3

    html5css3 揭秘HTML5和CSS3 HTML5新增和移除的元素 HTML5基本布局 HTML5对表单的支持 HTML5 DOM变化 HTML5的

    javascript,css3,html5讲义

    《疯狂HTML 5/CSS3/JavaScript讲义》是一本全面介绍HTML 5、CSS3和JavaScript前端开发技术的图书,系统地介绍了HTML 5常用的元素和属性、HTML 5的表单元素和属性、HTML5的绘图支持、HTML 5的多媒体支持、CSS3的功能...

    疯狂HTML5\CSS3\JavaScript讲义-源代码

    第3章 HTML 5表单相关元素和属性 第4章 HTML 5的绘图支持 第5章 HTML 5的多媒体支持 第二部分 第6章 级联样式单与CSS选择器 第7章 字体与文本相关属性 第8章 背景、边框和补丁相关属性 第9章 大小、定位、...

    DOM脚本编程

    工作在网站顾问公司(www.clearleft.com)的Jeremy 喜欢使用Web标准的三驾马车来构建易于访问的、设计考究的网站:XHTML,CSS和DOM。个人在线地址是adactio.com。Jeremy 同时也是Web标准项目 (webstandards.org)的一个...

    揭秘HTML5和CSS3

    HTML5新增和移除的元素 HTML5基本布局 HTML5对表单的支持 HTML5 DOM变化 HTML5的Javascript APIs Canvas Video/Audio Drag&Drop Geolocation Application Cache Database Storage X-Document Messaging

    前端开发三件套HTML&CSS&JavaScript

    1HTML常见文本标签 2HTML属性 3HTML块元素与行内元素 4HTML表单 2.CSS 5CSS导入方式 6CSS选择器 7CSS常见属性 8CSS盒子模型 9CSS浮动 10CSS定位 3.JavaScript 11JS导入方式 12JS基本语法 13JS函数 14JS事件 15JSDOM ...

    家居网-网页课程设计(JS + CSS + HTMl )+ 设计报告

    (2)使用表单和控件的常用DOM属性、方法、事件进行表单前端验证1次和其他功能1次。 (3)使用BOM调用浏览器功能1次,例如页面滚动、秒杀倒计时、打印、通知、本地存储等。 (4)使用ECharts库(https://echarts.apache.org...

    前端代码学习(HTML+CSS+JS进阶学习全资料)

    其中,HTML模块涵盖了HTML基础语法、HTML5的新增功能以及表单设计和验证。CSS模块涵盖了CSS选择器和属性、各种布局技术,包括Flexbox和Grid,以及响应式设计原理。JavaScript模块包含了JavaScript语法和数据类型、...

    HTML5和CSS3入门

    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讲义_part1

    本书是一本全面介绍HTML 5、CSS 3和JavaScript前端开发技术的图书,系统地介绍了HTML 5常用的元素和属性、HTML 5的表单元素和属性、HTML 5的绘图支持、HTML 5的多媒体支持、CSS 3的功能和用法、最前沿的变形与动画...

    疯狂HTML 5_CSS 3_JavaScript讲义_part2

    本书是一本全面介绍HTML 5、CSS 3和JavaScript前端开发技术的图书,系统地介绍了HTML 5常用的元素和属性、HTML 5的表单元素和属性、HTML 5的绘图支持、HTML 5的多媒体支持、CSS 3的功能和用法、最前沿的变形与动画...

    JavaScript + CSS/CSS3 + HTML 网页登陆 + 注册界面设计

    文本输入框做了 required 必须填写条件,运用在项目中可以通过 JavaScript 约束验证 DOM 方法checkValidity()、setCustomValidity()等做异常处理。 注册界面设计 注册界面由一个简单的表单(Email、用户名、密码、...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part1.rar

     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 ...

    html5 html5 教程 html5 html5

    •新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 •减少对外部插件的需求(比如 Flash) •更优秀的错误处理 •更多取代脚本的标记 •HTML5 应该独立于设备 •开发进程应对公众透明 新特性 HTML5 中的一些有趣的...

    JS-CSS-Class-Based-Validation:通过向 DOM 元素添加类来创建表单验证

    JS-CSS-基于类的验证 通过向 DOM 元素添加类来创建表单验证

    jQuery DOM操作小结与实例

    DOM操作的分类:DOM CORE(核心)、HTML-DOM和CSS-DOM 1. DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它。 它的用途并非仅限于处理网页,也可以用来处理任何一种使用标记语言...

    html5入门到精通 视频教程

    1.HTML常用标记超链接表格表单 2.HTML常用标题段落等标记 3.相关概念及HTML语法 4-CSS语法部分选择符 5-CSS部分选择符及选择符权重 6-CSS部分文本属性上 7-CSS部分文本属性下 8-CSS列表背景属性 9-CSS背景及浮动属性...

Global site tag (gtag.js) - Google Analytics