XHTML那点事【表单标签<form>的使用】

最新推荐文章于 2022-03-15 19:44:48 发布

原创最新推荐文章于 2022-03-15 19:44:48 发布 · 849 阅读

1 ·

CC 4.0 BY-SA版权

熟能生巧→【HTML之我见】专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了HTML表单中的各种控件用法，包括label、form、input、textarea及select等标签的属性与应用场景，适合初学者入门。

谈谈表单控件的一些用法，废话少说，直切正题：

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>

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之类的技术，可以参考模仿，自己亲自动手写页面，千万不要以为会拖控件就代表你会页面设置了。我们要做到的是，不需要根据提示，直接手写页面的。不依赖于控件的方便，这样才能进步！

****************************************************************************************************************************************************************************************

❤永葆一颗纯洁、宽容平和、仁慈谦卑和意气风发的心！

态度决定一切努力改变命运