XHTML那点事【表单标签<form>的使用】
2013-09-28 12:19
316 查看
谈谈表单控件的一些用法,废话少说,直切正题:
1、<label>标签
还记得ASP.NET里面有个label控件吧,呵呵,当时我们只注重于其只用于添加文字。现在我们来看看,XHTML中<label>控件的作用。先观察一下下面的代码,然后进行分析:
在浏览器中运行一下,可以看出该标签不会出现任何特殊效果,如果在<label>标签中单击文本,将会触发这个控件。当用户选择该标签时,浏览器就会自动将焦点跳转到和标签相关的表单控件上。
上例中的for属性,可把<label>标签绑定到另外一个标签。for属性的值设置应该与相关表单控件的id属性的值相同。
2、<form>标签
一个网页可以有多个表单标签,但用户一次只能向服务器发送一个表单数据。让咱们来看看到底<form>标签如何实现方法的使用。
使用<form></form>来进行创建表单。
<input>标签的作用是为用户提供输入信息手段,最常见的是注册用户窗口,比如说你想要注册一个QQ账号、一个人人账号或者微博账号,你用到的注册页面都是一种表单页面。那么至于如何设置页面,如何设计出美好的页面,咱们可以参考一下《Web表单设计 创建高可用性的网页表单》,虽然是英文的,但我建议您还是沉住气,静下心来慢慢研读,这对于设计表单很有帮助。
不多说其他的了,谈谈<form>标签中的属性以及用途。
(1)action : 这个属性的值是数据处理程序的程序名;
(2)method :两种方式:post和get;当method=post时,就是将数据进行保存和更新。当method=get时,就是将输入的数据作为一个URL的一部分进行发送,你甚至可以这样理解:get是用来取得和显示数据的。
(3)id :用于设计表单的名称(代替了以前的name属性)
(4)target:用来指定目标窗口或目标帧,用法很简单就是写成target="windows"
(5)onsubmit:单击表单中的提交按钮,发送数据前触发事件;
(6)onreset:单击表单中的重置按钮,发送数据前触发事件;
举个例子:
3、看到上面的例子,发现有个从来没用过的标签<input>。这就是我准备要阐述的<input>标签。
<input>标签是定义一个用户输入区,用户可在其中输入信息。需要注意的是,这个标签要用在<form></form>之间。
****************************************************************************************************************************************************************************************
其实这个标签根据不同的type属性决定出不同的性质。具体如下:最好记得常用的。
input type="submit" 将表单(Form)里的信息提交给表单里action所指向的文件,数据将被送到服务器中
input type="text" 单行文本输入框
input type=”button” 表示普通按钮
input type=”checkbox” 复选框
input type=”radio” 单选框
select 下拉框
<select name="color" id="color">
<option value="red" selected="selected">红</option>
<option value="green">绿</option>
<option value="blue">蓝</option>
</select>
input type=”password” 密码输入框(输入的文字用*表示)
input type=”file” 表示插入一个文件
input type=”image” 表示插入一个图像
input type=”reset” 表示清除表单的数据,以便重新输入
input type=”hidden” 表示隐藏按钮
****************************************************************************************************************************************************************************************
此外,<input>标签中的属性还有:
id:定义当前元素的标识号;
name:定义当前input元素的控件名称,用于发送给服务器的“名/值”中
type:决定输入类型,上面已经详细列出来了
value:用于设置输入默认值,则如果用户不输入的话,就采用这个默认值了;
src:注意啦,~\(≧▽≦)/~这个是针对type=image的情况而言的,定义以提交按钮形式显示图像的URL
checkd:表示复选框中此项被默认选中
maxlengh:表示单行文本框能够输入的最大字符个数
size:用于设置多行文本时的最大输入字符数,采用width和height方法
onclick:单击时调用指定的函数子程序
onselect:表示当前项被选择时调用指定的子程序。
****************************************************************************************************************************************************************************************
以下顺便说个课外的话题:<input> 属性中的id和name的区别(体现在调用方法上)
来个栗子,慢慢吃呀:
那么如果我们想要这个【提交】按钮变为灰色不可用的Javascript的调用代码如下:
(1)用name调用:
tijiao.disabled="disabled"
我的提议:在写页面的代码时,还是将id和name都写成一样的吧,省事又省心。当然我们心中一定要对它们进行区别,不仅要注重功能的实现,也要注重代码的深层机制。
4、<textarea>标签
<textarea></textarea>标签是用来创建一个输入多行的文本框的。其具有name、cols、rows等属性。
我的看法:你还是采用css的height和width来控制,至于为什么,我们到时候谈到如何使用CSS再详细讨论,在这里暂时用rows和cols来设置尺寸吧!
不多说了,这个用法不难,继续来颗栗子:
这个栗子中,多行输入文本框中会有默认输入:“请在此处输入建议”。
O(∩_∩)O~细心的你是不是发现,听到这很熟悉,不错,在前面的<input>标签中我们提到了单行文本框也可以设置默认值,使用的是value属性。
5、再说<select>和<option>标签的那点事
<select>标签用于创建单选或多选菜单,供用户从列表中选择一项或者多项数据(如何多选,哈哈,告诉您:加入multiple属性)输入。下面我们从它的属性谈起:
列表标签中的属性及其用途→
(1)<select name=""> 表示此列表框的名称
(2)<select size=""> 用来设置列表的高度,默认值为1
(3)<select multiple="">加入了multiple属性值后列表框就成了可以多选了。
(4)<select value=""> 用来给<option>指定的那一个选项赋值,该值是要传送到服务器上的,服务器正是通过调用<select>区域的名字的value属性来获得该区域选中的数据项
(5)<select selected="">值为selected时表示该项默认已选中
说的是不是有点虚幻?来颗栗子》》》
好了,差不多了,至于如何收集表单数据的服务器处理程序自己参看其他相关书籍,笔者不在一一介绍了。总而言之吧,学习HTML、XML之类的技术,可以参考模仿,自己亲自动手写页面,千万不要以为会拖控件就代表你会页面设置了。我们要做到的是,不需要根据提示,直接手写页面的。不依赖于控件的方便,这样才能进步!
****************************************************************************************************************************************************************************************
❤永葆一颗纯洁、宽容平和、仁慈谦卑和意气风发的心!
态度决定一切 努力改变命运
1、<label>标签
还记得ASP.NET里面有个label控件吧,呵呵,当时我们只注重于其只用于添加文字。现在我们来看看,XHTML中<label>控件的作用。先观察一下下面的代码,然后进行分析:
<html> <head> <title><h1>我的表单文档</h1></title> </head> <body> <form id="form1" name="form1" method="post" action=""> <label for="user">用户</label> <input type="text" name="user" id="user"/> <label for="password">密码</label> <input type="text" name="password" id="password"/> <inout type="submit" name="button" id="button" value="提交"/> </form> </body> </html>
在浏览器中运行一下,可以看出该标签不会出现任何特殊效果,如果在<label>标签中单击文本,将会触发这个控件。当用户选择该标签时,浏览器就会自动将焦点跳转到和标签相关的表单控件上。
上例中的for属性,可把<label>标签绑定到另外一个标签。for属性的值设置应该与相关表单控件的id属性的值相同。
2、<form>标签
一个网页可以有多个表单标签,但用户一次只能向服务器发送一个表单数据。让咱们来看看到底<form>标签如何实现方法的使用。
使用<form></form>来进行创建表单。
<input>标签的作用是为用户提供输入信息手段,最常见的是注册用户窗口,比如说你想要注册一个QQ账号、一个人人账号或者微博账号,你用到的注册页面都是一种表单页面。那么至于如何设置页面,如何设计出美好的页面,咱们可以参考一下《Web表单设计 创建高可用性的网页表单》,虽然是英文的,但我建议您还是沉住气,静下心来慢慢研读,这对于设计表单很有帮助。
不多说其他的了,谈谈<form>标签中的属性以及用途。
(1)action : 这个属性的值是数据处理程序的程序名;
(2)method :两种方式:post和get;当method=post时,就是将数据进行保存和更新。当method=get时,就是将输入的数据作为一个URL的一部分进行发送,你甚至可以这样理解:get是用来取得和显示数据的。
(3)id :用于设计表单的名称(代替了以前的name属性)
(4)target:用来指定目标窗口或目标帧,用法很简单就是写成target="windows"
(5)onsubmit:单击表单中的提交按钮,发送数据前触发事件;
(6)onreset:单击表单中的重置按钮,发送数据前触发事件;
举个例子:
<form action="" method="" target=""> <label for="">你好</label> <input type="text" id="" name="" /> </form>
3、看到上面的例子,发现有个从来没用过的标签<input>。这就是我准备要阐述的<input>标签。
<input>标签是定义一个用户输入区,用户可在其中输入信息。需要注意的是,这个标签要用在<form></form>之间。
****************************************************************************************************************************************************************************************
其实这个标签根据不同的type属性决定出不同的性质。具体如下:最好记得常用的。
input type="submit" 将表单(Form)里的信息提交给表单里action所指向的文件,数据将被送到服务器中
input type="text" 单行文本输入框
input type=”button” 表示普通按钮
input type=”checkbox” 复选框
input type=”radio” 单选框
select 下拉框
<select name="color" id="color">
<option value="red" selected="selected">红</option>
<option value="green">绿</option>
<option value="blue">蓝</option>
</select>
input type=”password” 密码输入框(输入的文字用*表示)
input type=”file” 表示插入一个文件
input type=”image” 表示插入一个图像
input type=”reset” 表示清除表单的数据,以便重新输入
input type=”hidden” 表示隐藏按钮
****************************************************************************************************************************************************************************************
此外,<input>标签中的属性还有:
id:定义当前元素的标识号;
name:定义当前input元素的控件名称,用于发送给服务器的“名/值”中
type:决定输入类型,上面已经详细列出来了
value:用于设置输入默认值,则如果用户不输入的话,就采用这个默认值了;
src:注意啦,~\(≧▽≦)/~这个是针对type=image的情况而言的,定义以提交按钮形式显示图像的URL
checkd:表示复选框中此项被默认选中
maxlengh:表示单行文本框能够输入的最大字符个数
size:用于设置多行文本时的最大输入字符数,采用width和height方法
onclick:单击时调用指定的函数子程序
onselect:表示当前项被选择时调用指定的子程序。
****************************************************************************************************************************************************************************************
以下顺便说个课外的话题:<input> 属性中的id和name的区别(体现在调用方法上)
来个栗子,慢慢吃呀:
<input type="button" name="submit" id="tijiao" value="提交"/>
那么如果我们想要这个【提交】按钮变为灰色不可用的Javascript的调用代码如下:
(1)用name调用:
document.form1.submit.disabled="disabled"
(2)用id调用:
tijiao.disabled="disabled"
我的提议:在写页面的代码时,还是将id和name都写成一样的吧,省事又省心。当然我们心中一定要对它们进行区别,不仅要注重功能的实现,也要注重代码的深层机制。
4、<textarea>标签
<textarea></textarea>标签是用来创建一个输入多行的文本框的。其具有name、cols、rows等属性。
我的看法:你还是采用css的height和width来控制,至于为什么,我们到时候谈到如何使用CSS再详细讨论,在这里暂时用rows和cols来设置尺寸吧!
不多说了,这个用法不难,继续来颗栗子:
<textarea name="advice" id="advie" cols="45" rows="5">请在此处输入建议</textarea>
这个栗子中,多行输入文本框中会有默认输入:“请在此处输入建议”。
O(∩_∩)O~细心的你是不是发现,听到这很熟悉,不错,在前面的<input>标签中我们提到了单行文本框也可以设置默认值,使用的是value属性。
5、再说<select>和<option>标签的那点事
<select>标签用于创建单选或多选菜单,供用户从列表中选择一项或者多项数据(如何多选,哈哈,告诉您:加入multiple属性)输入。下面我们从它的属性谈起:
列表标签中的属性及其用途→
(1)<select name=""> 表示此列表框的名称
(2)<select size=""> 用来设置列表的高度,默认值为1
(3)<select multiple="">加入了multiple属性值后列表框就成了可以多选了。
(4)<select value=""> 用来给<option>指定的那一个选项赋值,该值是要传送到服务器上的,服务器正是通过调用<select>区域的名字的value属性来获得该区域选中的数据项
(5)<select selected="">值为selected时表示该项默认已选中
说的是不是有点虚幻?来颗栗子》》》
<select name="color" id="color"> <option value="red" selected="selected">红色</option> <option value="green">绿色</option> <option value="blue">蓝色</option> </select>
好了,差不多了,至于如何收集表单数据的服务器处理程序自己参看其他相关书籍,笔者不在一一介绍了。总而言之吧,学习HTML、XML之类的技术,可以参考模仿,自己亲自动手写页面,千万不要以为会拖控件就代表你会页面设置了。我们要做到的是,不需要根据提示,直接手写页面的。不依赖于控件的方便,这样才能进步!
****************************************************************************************************************************************************************************************
❤永葆一颗纯洁、宽容平和、仁慈谦卑和意气风发的心!
态度决定一切 努力改变命运
相关文章推荐
- <form>表单和ajax同时使用导致json报错
- 关于<button><form>标签的正确使用
- 表单标签<form>:表单的作用是收集信息
- Javaweb表单标签<form>标签
- springMVC表单标签 <form:select>如何禁用下拉列表
- SpringMVC<from:form>表单标签和<input>表单标签简介
- 第22课:<img>标签、表单标签(form)
- SpringMVC<from:form>表单标签和<input>表单标签简介
- jsp中使用 <a>、<img>、<link>、<form>和ajax 标签中的URL相对路径问题
- <input type="image">标签引发的form表单自动提交
- <form>表单标签
- SpringMVC<from:form>表单标签
- truts2中表单可以不用struts自带的<s:form>标签,直接用html的<form>标签能够提交数据到action
- JSP使用<form>表单无法跳转时的一种解决办法
- SpringMVC<from:form>表单标签和<input>表单标签简介
- Html form <select>下拉列表菜单与跳转菜单表单标签篇
- struts2的form等表单布局问题,去掉其自动生成的<table><tr><td>标签
- 表单标签<form>
- ASP.NET母版页使用 按下回车刷新页面 去掉 <form></form>标签
- html页面中,代码不转义,使用--------<xmp></xmp>标签