在网页中创建表单

最新推荐文章于 2025-06-04 09:00:10 发布

coco_astrids

最新推荐文章于 2025-06-04 09:00:10 发布

阅读量7.3k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Web

本文链接：https://blog.youkuaiyun.com/coco_astrids/article/details/53559779

Web 专栏收录该内容

5 篇文章

订阅专栏

表单是实现动态网页的一种主要的外在形式，利用表单可以收集浏览者的信息或实现搜索等功能。

表单信息的处理过程：单击表单中的提交按钮时，在表单中输入的信息就会被提交到服务器中，服务器的有关应用程序会处理提交信息。处理结果或者是将用户提交的信息储存在服务器端的数据库中，或者是将有关信息返回到客户端的浏览器上。

完整的实现表单功能，需要设计两个方面：一是用于描述表单对象的HTML源代码；二是客户端的脚本，或者服务器端用于处理所填写信息的程序。

表单组成标记

标记	描述
<form>	定义一个表单区域，以及携带表单的相关信息
<input>	设置输入表单的元素
<select>	设置列表元素
<option>	设置列表元素中的项目
<textarea>	设置表单文本域元素，如备注

表单标记

除了以上三个属性外，还有onsubmit属性，用来指定处理表单的脚本函数和enctype属性。

Action 属性

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到 web 服务器上的网页。

在上面的例子中，指定了某个服务器脚本来处理被提交表单：

<form action="action_page.php">

如果省略 action 属性，则 action 会被设置为当前页面。

输入标记<input>

<input type="元素类型" name="表单元素名称">(type和name属性是必设属性)

type属性值

type属性值	描述
text	设置单行文本框元素
password	设置密码元素
file	设置文件元素
hidden	设置隐藏元素
radio	设置单选框元素
checkbox	设置复(多)选框元素
button	设置普通按钮元素
submit	设置提交按钮元素
reset	设置重置按钮元素
image	设置图像按钮元素

1.文本框 text

文本框常用属性

属性	描述
name	设置文本框的名称，在脚本中作为文本框标识获取其数据
maxlength	设置在文本框中最多可输入的字符数
size	控制文本框长度，单位是像素，默认值是24个像素
value	设置文本框的默认值(会显示在文本框中)

示例：

代码实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>表单</title>

</head>
<body>

<h2>请输入用户信息</h2>
 <form name="form1" action="" method="post">
  姓  名：<input type="text" name="user"><br/>
  电  话：<input type="text" name="tel" size="10"></br>
  地  址：<input type="text" name="adress" size="20"><br/>
  邮  编：<input type="text" name="#" size="6" maxlength="6"></br>
  个人主页：<input text="text" name="1" size="20" value="http://">
 </form>

</body>

</html>

2.密码框password

<input type="password" name="密码框名称">.

示例：

代码实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>表单</title>

</head>
<body>


<h2>请输入用户姓名和密码</h2>
 <form name="form1" action="" method="post">
  姓  名：<input type="text" name="user" size="10"><br/>
  密  码：<input type="password" name="psw" size="20"><br/>
 </form>

</body>

</html>

3.隐藏域hidden

隐藏域的type, name, value属性都必须设置；value属性用于设置隐藏域需传递的值，name属性设置隐藏域的名称，用于在处理程序中获取域的数据。

4. 单选按钮radio

value用于设置单选按钮选中后传到服务器端的值；checked表示此项被默认选中，如果不设置默认选中状态，则不要使用checked属性。

注意：属于同一组的单选框的name属性必须设置为相同的值

5.复选按钮checkbox

同一组的复选框的name属性值可以设置为相同，也可不同；value和checked属性的使用与单选框一样。

6.重置按钮reset

示例：

代码实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>表单</title>

</head>
<body>

<form name="form1" action="" method="post">
  性  别：<input type="radio" value="famle" name="sex">女
                    <input type="radio" value="male" name="sex">男<br/>
  爱  好：<input type="checkbox" value="music" name="1">音乐
                    <input type="checkbox" value="book" name="2">阅读
                    <input type="checkbox" value="trip" name="3">旅游
                    <input type="checkbox" value="sport" name="4">运动<br/>
                    <input type="reset" value="重置"/>
 </form>

<form name="form1" action="" method="post">
  性  别：<input type="radio" value="famle" name="sex">女
                    <input type="radio" value="male" name="sex">男<br/>
  爱  好：<input type="checkbox" value="music" name="1">音乐
                    <input type="checkbox" value="book" name="2">阅读
                    <input type="checkbox" value="trip" name="3">旅游
                    <input type="checkbox" value="sport" name="4">运动<br/>
                    <input type="reset" value="重置"/>
 </form>

</body>

</html>

选择列表标记<select>：

1.列表

列表指一次可以选择多个列表选项，且一次可以显示1个以上列表选项的选择列表

...

</select>

<select>用于声明选择列表，<option>标记用于设置各个选项。

select表及常用属性:

属性
name	设置列表名称
size	设置能同时显示的列表选项个数(默认为1)，取值大于等于1
multiple	设置列表中的项目可多选
value	设置选项值
selected	设置默认选项，可对多个列表选项进行此属性的设置

示例：

代码实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>表单</title>

</head>
<body>

<form>
 <h2>请选择你喜欢吃的水果：</h2>
 <select name="fruit" size="5" multiple="multiple">
  <option value="apple" selected="selected">苹果</option>
  <option value="banana">香蕉</option>
  <option value="watermelon" selected="selected">西瓜</option>
  <option value="pear">梨</option>
  <option value="peach" selected="selected">桃子</option>
 </select>
 </form>

</body>

</html>

2. 下拉列表

下拉列表是指，一次只能选择一个列表选项，且一次只能显示一个列表选项的选择列表。size属性不用设置，默认为1；切不能设置multiple属性。

示例：

代码实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>表单</title>

</head>
<body>

<form>
  请选择列表中你最喜欢的电影：<br/><br/>
  <select name="movie">
   <option value="1">肖申克的救赎</option>
   <option value="2">海上钢琴师</option>
   <option value="3">美国队长3</option>
   <option value="4">海洋奇缘</option>
   <option value="5">钢琴家</option>
   <option value="6">神奇动物在哪里</option>
  </select>

</form>

</body>

</html>

3. 文本域标记<textarea>

示例：

代码实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>表单</title>

</head>
<body>

<form>
 备  注：
 <textarea name="remark" rows="8" cols="40"></textarea>
 </form>

</body>

</html>

表单综合示例：

代码实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>表单</title>

</head>
<body>

<table width="60%" border="2" cellpadding="8" cellspacing="0" align="center">
  <tr>
   <th align="center" colspan="4">产品订购</th>
  </tr>
  <form name="form1" method="post" action="">
   <tr>
    <td align="right">姓名：</td>
    <td><input type="text" size="30" name="user"></td>
    <td>商品名称：</td>
    <td><input type="text" size="30" name="product"></td>
   </tr>
   <tr>
    <td align="right">地区：</td>
    <td>
     <select name="place">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="山东">山东</option>
      <option value="江苏">江苏</option>
      <option value="深圳">深圳</option>
     </select>
    </td>
    <td>付款方式：</td>
    <td>
     <input type="radio" name="matter" value="online">网上
     <input type="radio" name="matter" value="poster">邮局
     <input type="radio" name="matter" value="bank">银行
    </td>
   </tr>
   <tr>
    <td align="right">关注产品：</td>
    <td colspan="3">
     <input type="checkbox" name="1" value="#">护肤品 
     <input type="checkbox" name="2" value="#">化妆品 
     <input type="checkbox" name="3" value="#">服 装 
     <input type="checkbox" name="4" value="#">电 器
    </td>
   </tr>
   <tr>
   <td align="right">联系电话：</td>
   <td colspan="3">
    <input type="text" size="30" name="tel">
   </td>
   </tr>
   <tr>
    <td align="right">备注：</td>
    <td colspan="3">40
    
     <textarea name="remark" rows="12" cols="80"></textarea>
    </td>
   </tr>
   <tr>
    <td colspan="4">         
     <input type="submit" value="提交">
     <input type="reset" value="重写">
    </td>
   </tr>
  </form>
 </table>
</body>
</html>