html表单:HTML表单基础知识
疯狂代码 https://www.wendangku.net/doc/e117950892.html,/ ?:http:/https://www.wendangku.net/doc/e117950892.html,/HtmlJiaoCheng/Article23344.html
本专题从最基础的表单知识,到表单的高级应用,让你有一个比较全面地认识,相信你在读完本专题以后,一定会对表单非常熟悉。
一、表单概述
表单,在网页中的作用不可小视,主要负责数据采集的功能,比如你可以采集访问者的名字和e-mail地址、调查表、留言簿等等。
1、表单的组成
一个表单有三个基本组成部分:
表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用 表单按钮来控制其他定义了处理脚本的处理工作。 为了顾及不同的网页设计工具,本文只讲述代码的设计,不具体讲述操作方法,下面就是表单的HTML代码设计要点:
1.1 表单标签<form></form>
功能:用于申明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里。
语法:<FORM ACTION="URL" METHOD="GET|POST" ENCTYPE="MIME" TARGET="...">. .
.</FORM>
属性解释见下表:
action=url指定一来处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址
.method=get或post指明提交表单的HTTP方法.可能的值为: post:POST方法在表单的主干包含名称/值对并且无需包含于action特性的URL中. get:不赞成。GET方法把名称/值对加在action的URL后面并且把新的
URL送至服务器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成使用.enctype=cdata指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式.这个特性的缺省值是"application/x-www-form-urlencoded"TARGET="..."指定提交的结果文档显示的位置: _blank :在一个新的、无名浏览器窗口调入指定的文档; _self :在指向这个目标的无素的相同的框架中调入文档; _parent :把文档调入当前框的直接的父FRAMESET框中;这个值在当前框没有父框时等价于_self; _top :把文档调入原来的最顶部的浏览器窗口中
(因此取消所有其它框架);这个值等价于当前框没有你框时的_self.
例如:
<form action="https://www.wendangku.net/doc/e117950892.html,/test.asp" method="post" target="_blank">...</form>
表示表单将向https://www.wendangku.net/doc/e117950892.html,/test.asp以post的方式提交,提交的结果在新的页面显示,数据提交的媒体方式是默认的application/x-www-form-urlencoded方式;
1.2 表单域
表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等,用于采集用户的输入或选择的数据,下面分别讲述这些表单域的代码格式:
1.2.1 文本框
文本框是一种让访问者自己输入内容的表单对象,通常被用来填写单个字或者简短的回答,如姓名、地址等。 代码格式:<input type="text" name="..." size="..." maxlength="..." value="...">
属性解释:
type="text"定义单行文本输入框;
name属性定义文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
size属性定义文本框的宽度,单位是单个字符宽度;
maxlength属性定义最多输入的字符数。
value属性定义文本框的初始值
样例1:
样例1代码:
<input type="text" name="example1" size="20" maxlength="15">
1.2.2 多行文本框
也是一种让访问者自己输入内容的表单对象,只不过能让访问者填写较长的内容。
代码格式:<TEXTAREA name="..." cols="..." rows="..." wrap="VIRTUAL"></TEXTAREA>
属性解释:
name属性定义多行文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
cols属性定义多行文本框的宽度,单位是单个字符宽度;
rows属性定义多行文本框的高度,单位是单个字符宽度;
wrap属性定义输入内容大于文本域时显示的方式,可选值如下:
默认值是文本自动换行;当输入内容超过文本域的右边界时会自动转到下一行,而数据在被提交处理时自动换行的地方不会有换行符出现; Off,用来避免文本换行,当输入的内容超过文本域右边界时,文本将向左滚动,必须用Return才能将插入点移到下一行; Virtual,允许文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行,而数据在被提交处理时自动换行的地方不会有换行符出现; Physical,让文本换行,当数据被提交处理时换行符也将被一起提交处理。
样例2:
样例2代码:
<TEXTAREA name="example2" cols="20" rows="2" wrap="PHYSICAL"></TEXTAREA>
1.2.3 密码框
是一种特殊的文本域,用于输入密码。当访问者输入文字时,文字会被星号或其它符号代替,而输入的文字会被隐藏。
代码格式:<input type="password" name="..." size="..." maxlength="...">
属性解释:
type="password"定义密码框;
name属性定义密码框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
size属性定义密码框的宽度,单位是单个字符宽度;
maxlength属性定义最多输入的字符数。
样例3:
样例3代码:
<input type="password" name="example3" size="20" maxlength="15">
1.2.4 隐藏域
隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的。当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
代码格式:<input type="hidden" name="..." value="...">
属性解释:
type="hidden"定义隐藏域;
name属性定义隐藏域的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
value属性定义隐藏域的值
例如:<input type="hidden" name="ExPws" value="dd">
1.2.5 复选框
复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素,都必须有一个唯一的名称。
代码格式:<INPUT type="checkbox" name="..." value="...">
属性解释:
type="checkbox"定义复选框;
name属性定义复选框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
value属性定义复选框的值
样例4: https://www.wendangku.net/doc/e117950892.html, https://www.wendangku.net/doc/e117950892.html,
样例4代码:
<input type="checkbox" name="yesky" value="09">https://www.wendangku.net/doc/e117950892.html,
<input type="checkbox" name="Chinabyte" value="08">https://www.wendangku.net/doc/e117950892.html,
1.2.6 单选框
当需要访问者在待选项中选择唯一的答案时,就需要用到单选框了。
代码格式:<input type="radio" name="..." value="...">
属性解释:
type="radio"定义单选框;
name属性定义单选框的名称,要保证数据的准确采集,单选框都是以组为单位使用的,在同一组中的单选项都必须用同一个名称;
value属性定义单选框的值,在同一组中,它们的域值必须是不同的。
样例5: https://www.wendangku.net/doc/e117950892.html, https://www.wendangku.net/doc/e117950892.html,
样例5代码:
<input type="radio" name="myFavor" value="1">https://www.wendangku.net/doc/e117950892.html,
<input type="radio" name="myFavor" value="2">https://www.wendangku.net/doc/e117950892.html,
1.2.7 文件上传框
有时候,需要用户上传自己的文件,文件上传框看上去和其它文本域差不多,只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。
注意:在使用文件域以前,请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置
ENCTYPE="multipart/form-data"来确保文件被正确编码;另外,表单的传送方式必须设置成POST。
代码格式:<input type="file" name="..." size="15" maxlength="100">
属性解释:
type="file"定义文件上传框;
name属性定义文件上传框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
size属性定义文件上传框的宽度,单位是单个字符宽度;
maxlength属性定义最多输入的字符数。
样例6:
样例6代码:
<input type="file" name="myfile" size="15" maxlength="100"> 1.2.8 下拉选择框
下拉选择框允许你在一个有限的空间设置多种选项。
代码格式:
<select name="..." size="..." multiple>
<option value="..." selected>...</option>
...
</select>
属性解释:
size属性定义下拉选择框的行数;
name属性定义下拉选择框的名称;
multiple属性表示可以多选,如果不设置本属性,那么只能单选;
value属性定义选择项的值;
selected属性表示默认已经选择本选项。
样例7: https://www.wendangku.net/doc/e117950892.html, https://www.wendangku.net/doc/e117950892.html,
样例7代码:
<select name="mySel" size="1">
<option value="1" selected>https://www.wendangku.net/doc/e117950892.html,</option>
<option value="d2">https://www.wendangku.net/doc/e117950892.html,</option>
</select>
样例8:
https://www.wendangku.net/doc/e117950892.html, https://www.wendangku.net/doc/e117950892.html, https://www.wendangku.net/doc/e117950892.html, 按Ctrl可以多选
样例8代码:
<select name="mySelt" size="3" multiple>
<option value="1" selected>https://www.wendangku.net/doc/e117950892.html,</option>
<option value="d2">https://www.wendangku.net/doc/e117950892.html,</option>
<option value="3">https://www.wendangku.net/doc/e117950892.html,</option>
</select>
1.3 表单按钮
表单按钮控制表单的运作。
1.3.1 提交按钮
提交按钮用来将输入的信息提交到服务器。
代码格式:<input type="submit" name="..." value="...">
属性解释:
type="submit"定义提交按钮;
name属性定义提交按钮的名称;
value属性定义按钮的显示文字;
样例9:
样例9代码:
<input type="submit" name="mySent" value="发送">
1.3.2 复位按钮
复位按钮用来重置表单。
代码格式:<input type="reset" name="..." value="...">
属性解释:
type="reset"定义复位按钮;
name属性定义复位按钮的名称;
value属性定义按钮的显示文字;
样例10:
样例10代码:
<input type="reset" name="myCancle" value="取消">
1.3.3 一般按钮
一般按钮用来控制其他定义了处理脚本的处理工作。
代码格式:<input type="button" name="..." value="..." >
属性解释:
type="button"定义一般按钮;
name属性定义一般按钮的名称;
value属性定义按钮的显示文字;
onClick属性,也可以是其它的事件,通过指定脚本函数来定义按钮的行为; 样例11:
样例11代码:
<input type="button" name=" 2008-11-18 15:06:16
疯狂代码 https://www.wendangku.net/doc/e117950892.html,/
HTML知识点总结 第一章知识总结 1.HTML文档结构(括号里面的是注释)
(头部部分) (可写可不写)3)
(段落的对其方式) 换行标签
6.图片标签
(align是用于调整图片相对于周围文本的对其方式) 7.文字布局 1)水平线
HTML知识点汇总 第一章HTML基础知识 1、HTML简介 HTML(Hypertext Markup Language),超文本标记语言,HTML利用各种标记来标识文档的结构以及标识超链接的信息。它是从SGML(Standard Generalized Markup Language,标准通用标识语言)中的一个子集演变而来的。 2、HTML的标记组成 HTML用于描述功能的符号称为“标记”。标记在使用时必须用尖括号“<>”括起来,而且是成对出现的,无斜杠的标记表示该标记的作用开始,有斜杠的标记表示该标记的作用结束。如
、 等 1)单标记:有些标记能完整的表达标记里的意思,只须在尖括号中输入标记名即可,这类标记叫 单标记。XHTML中要求单标记也必须闭合,即在标记“>”前添加斜杠。常见的单标记如
、
等。 2)双标记:双标记有头有尾,且前面的标记与后面的标记保持一致,但在后面的标记前有斜线, 语法形如:<标记>内容标记>。例如:段落 3)XHTML要求所有标记均为小写,且所有标记属性必须添加双引号 4)标记对不能交叉 3、HTML基本结构网页标题 1)标记对不能放在 标记对中,同理,其它表示内容的标记也不能放在标记对 中 2)表示HTML语言,在里面包含头部()和内容体 ()。 1页) ) web 页的软件? (B )(选择1项) ) Internet Explorer ) FTP A ) place=middle B C ) align=center D 8、 {HTML 题目}将当前页面的背景色为 蓝色, 择1项) A ) bgcolor="blue" C ) backcolor="blue" 9、 {HTML 题目} A 文件夹与 现在我们希望在 B D B 文件夹是同级文件夹,其中 ) type=middle ) type=center 应该使用哪一句代码来描述此种设置 ( A ) (选 ) bgground="blue" ) background="blue" A 下有 a.htm , B 下有 b.htm 文件, a.htm 文件中创建超链接,链接到 b.htm ,应该在 a.htm 页面代码中如何描 1、 {HTML 题目}在HTML 页面中制作一个图像,想要在鼠标指向这个图像时浮出一条提示信 息,应该使用的参数是 :( C ) ( 选择 1 项) A) POP B) SRC C) ALT D) MSG 2、 {HTML 题目}在页面中看不见的表单元素是 那种? (C )(选择1项) A) B C) D 3、(HTML 题目)以下哪一个项目是用来访问 A) Outlook Express B C) QQ D 4. {HTML 题目}下面关于CSS 表述正确的是(A,C,D )(选择3项) A) CSS 是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计 必不可少的工具之一。 B) 层叠样式表是 HTML 的辅助工具, 缺点是设计者设计的网页缺少动感, 网页内容的 排版布局上也有很多困难 C) 使用 CSS 能够简化网页的格式代码, 加快下载显示的速度,也减少了需要上传的代 码数量,大大减少了重复劳动的工作量。 D) CSS 是Cascading Stylesheets 的缩写,中文意思是层叠样式表 5、 {HTML 题目}下面的标记用于表示 HTML 文档的结束的是:(B )( 选择1项) A) /BODY B) /HTML C) /TABLE D) /TITLE 6、 {HTML 题目}在Html 标记中,哪个标记表示表格 (C )(选择1项) A)
B )
C) D )
7、{HTML 题目}在Html 标记中,用什么方法可以将整个表格在页面中居中 (C )( 选择1 项) 述链接内容( C ) ( 选择 1 项) A) b.htm B ) ././././B/b.htm C) ../B/b.htm D../../b.htm 10、 {HTML 题目 }语句 A :HTML 文档必须包括“头”和“主体”两部分 语句B : HTML 文档的扩展名为.htm 或.html ( D ) (选择 1 项) A)两句都对 B)两句都错 C)只有A 对 D)只有B 对 11、 {HTML 题目}我们想要在 HTML 文档中加入图像,可以使用哪个标记来达到要求呢? (选 择1项)( C ) A) B )