Web前端开发-8

最新推荐文章于 2024-04-30 14:40:32 发布

阅微草堂123

最新推荐文章于 2024-04-30 14:40:32 发布

阅读量390

点赞数

分类专栏： Web 文章标签： web前端开发表单

本文链接：https://blog.csdn.net/cfyzcc/article/details/50829659

版权

Web 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

/***********************************************
本篇文章记述了web前端开发中的表单问题
*******************************************************/
一、概述
前面叙述了静态网页和动态网页，他们的根本区别就是能否提供用户的交互能力。这些按钮、多选框等都属于表单问题。表单收集客户信息，并且交给服务器来处理这些信息。在ASP.NET技术中有详细介绍后端服务器处理的功能。

二、表单form标签
创建该表单如同创建一个表格，表格的行、列和单元格都放在

标签中
语法：

<!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>
    <title>表单form标签</title>
</head>
<body>
    <form>
        <input type="text" value="这是一个文本框" /><br />   
        <textarea></textarea><br />       //一个文本区域
        <select>
            <option>HTML</option>
            <option>CSS</option>
            <option>JavaScript</option>
        </select>
    </form>
</body>
</html>

效果如下；
这里写图片描述

form标签里的属性有name，action，method，enctype，target。其中，name表示这个表单的名字；action表示你选定的信息传给谁处理；methd表示表单数据采用哪一种HTTP提交方法；target表示打开网页的方式，是在当前的网页还是另外开一个空白页。
比如：

<body>
<form name="form1" action="mailto:lvyestudy@foxmail.com" method="post" target="_blank" enctype="application/x-www-form-urlencoded">
</form>
</body>

这里method和enctype都是默认方式。

表单对象：
表单对象就是放在form标签内部的各种标签。最常用的有文本框和下拉菜单，表单对象主要有3种：input，textarea，select和option。这里select和option承兑使用，就像ol和li一样。

三、input标签概述
语法：

<input type="表单的类型”/>

这里注意input标签是自闭和的标签，不需要结束标签。其中表单类型的填写如下图所示：
这里写图片描述
下面分别阐述：
1.文本框text
语法如下：

<!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>
    <title>form标签实验</title>
</head>
<body>
<form name="text1" method="get" action="HTMLPage.htm"">
    姓名：<input type="text" value="" size="15" maxlength="" /> <br />
    年龄：<input type="text" value="18" size="3" maxlength="3" />
</form>
</body>
</html>

显示效果如下：
这里写图片描述
这里可以看出input type的属性值有value，size，maxlength分别表示默认字体，文本框长度，最多输入的字符数。

2.密码文本框password
这个类型和文本框类似，也有三个属性，value、size、maxlength

<!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>
    <title>form标签实验</title>
</head>
<body>
<form name="text1" method="get" action="HTMLPage.htm"">
    姓名：<input type="text" value="" size="15" maxlength="" /> <br />
    年龄：<input type="text" value="18" size="3" maxlength="3" /> <br />
    账号:<input type="text" value="" size="5" maxlength="" /> <br />
    密码;<input type="password" value="" size="8" maxlength="" /><br />
</form>
</body>
</html>

效果如下；
这里写图片描述
这里的value是框内默认的值，size是文本框的长度，maxlength是最大输入数。

3.单选按钮radio
单选按钮radio只能在选项列表中选择一项，选项与选项之间是互斥的。
语法如下：

<!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>
    <title>form标签实验</title>
</head>
<body>
<form name="text1" method="get" action="HTMLPage.htm"">
    姓名：<input type="text" value="" size="15" maxlength="" /> <br />
    年龄：<input type="text" value="18" size="3" maxlength="3" /> <br />
    账号:<input type="text" value="" size="5" maxlength="" /> <br />
    密码;<input type="password" value="" size="8" maxlength="" /><br />
    <input type="radio" name="question1" value="boy" />男
    <input type="radio" name="question1" value="girl" />女
    <br />
    <input type="radio" name="question2" value="80后"/>80后
    <input type="radio" name="question2" valude="90后" />90后
    <input type="radio" name="question2" valude="00后" />00后
</form>
</body>
</html>

效果如下：
这里写图片描述
注意式中，type是radio，即单选框。name值必须是一样的才是一类问题，否则可以重复选择。value值现在不加虽然外型上看起来没什么差别，但是语义上不一样，需要注意。

4.复选框（多选）checkbox
需要记住的是checkbox需要跟label配套使用。

<!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>
    <title></title>
</head>
<body>
<form name="form1" method="get" action="text.htm">
你喜欢的水果有：<br />
    <input id="checkbox1" type="checkbox" checked="checked" /> <label for="checkbox1">苹果</label><br />
    <input id="checkbox2" type="checkbox" /><label for="checkbox2">banana</label><br />
    <input id="checkbox3" type="checkbox" /><label for="checkbox3">pear</label>
</form>
</body>
</html>

效果图：
这里写图片描述

5.按钮button
按钮分为普通按钮button，提交按钮submit和重置按钮reset。
普通按钮，一般需要配合JavaScript脚本才能实现表单。
语法：

<!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>
    <title></title>
</head>
<body>
<form name="form1" method="get" action="text.htm">
你喜欢的水果有：<br />
    <input id="checkbox1" type="checkbox" checked="checked" /> <label for="checkbox1">苹果</label><br />
    <input id="checkbox2" type="checkbox" /><label for="checkbox2">banana</label><br />
    <input id="checkbox3" type="checkbox" /><label for="checkbox3">pear</label>
    <br />
<!--按钮示例-->
    账号：<input type="text" /><br />
    密码：<input type="password"" /><br />
    <input type="submit" value="提交" />
    <input type="reset" value="重置" />
</form>
</body>
</html>

效果图：
这里写图片描述

submit按钮是递交表单信息给服务器处理，要用到JavaScript知识，之后会说到。

6.图片域image
可以用图像域来美化一个按钮，即图像可以做图像存在，参照img标签，也可以作为按钮功能存在。当然也可以用ccs来制作。
语法如下：

<!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>
    <title></title>
</head>
<body>
<form name="form1" method="get" action="text.htm">
你喜欢的水果有：<br />
    <input id="checkbox1" type="checkbox" checked="checked" /> <label for="checkbox1">苹果</label><br />
    <input id="checkbox2" type="checkbox" /><label for="checkbox2">banana</label><br />
    <input id="checkbox3" type="checkbox" /><label for="checkbox3">pear</label>
    <br />
<!--按钮示例-->
    账号：<input type="text" /><br />
    密码：<input type="password"" /><br />
    <input type="submit" value="提交" />
    <input type="reset" value="重置" />

    <!--image按钮示例-->
    <input type="image" src="img/1.jpg" />
</form>
</body>
</html>

这里面src指定的是图像的来源。

7.隐藏域hidden
就是在输入数据过程中，不希望被别人看到。
语法：

<input type="hidden" value="10"/>

在ASP.NET动态页面中才会看到他真正的用处。

8.文件域file
目的：这是为了在HTML中，用input标签实现文件的上传。但是需要注意的是必须在form的标签中说明编码方式 enctype=”multipart/form-data“。
语法为：

<input type="file"/>

效果图：
这里写图片描述

9.文本域textarea
单行文本text只能输入一行信息，而多行文本框可以输入多行信息。
多行文本框使用的textarea标签，而不是input标签。
语法：

<textarea rows="行数" cols="列数">多行文本框内容</textarea>

总结：文本共有三种形式，分别是单文本，密码和多文本。其中签两个都用input标签，而第三个用textare标签。

<!--单文本-->
<input type="text" value="10"/>
<input type="password" value="2"/>
<!--多行文本-->
<textarea rows="8" cols="5">请介绍你自己</textarea>

10.下拉列表
下拉列表必须由select和option配套使用，这和无序列表由ul和li配合使用原理类似。
语法如下：

<select>
    <option>********</option>
    .........
    <option>**********</option>
</select>

<!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>
    <title></title>
</head>
<body>
<form name="form1" method="get" action="text.htm">
你喜欢的水果有：<br />
    <input id="checkbox1" type="checkbox" checked="checked" /> <label for="checkbox1">苹果</label><br />
    <input id="checkbox2" type="checkbox" /><label for="checkbox2">banana</label><br />
    <input id="checkbox3" type="checkbox" /><label for="checkbox3">pear</label>
    <br />
<!--按钮示例-->
    账号：<input type="text" /><br />
    密码：<input type="password"" /><br />
    <input type="submit" value="提交" />
    <input type="reset" value="重置" />
    <br />
    <input type="file" />

    <!--隐藏域-->
    <input type="hidden" value="10" />
    <!--下拉列表-->

</form>
<select >
    <option>HTML</option>
    <option>CSS</option>
    <option>JS</option>
    <option>JSP.NET</option>
    <option>JavaScript</option>
    <option>ASP.NET</option>
     <option>Ajax</option>
 </select>
</body>
</html>

效果为：
这里写图片描述

注意这里select属性有：
multiple属性

<select multiple=”multiple“>
    <option>内容</option>
    ................
    <option>内容</option>
</select>

size属性
表示下拉列表最多显示的个数

<select multiple=”multiple“  size="4">
    <option>内容</option>
    ................
    <option>内容</option>
</select>

11.表单按钮与button标签按钮
这里有2种实现按钮的形式，分别是input表单标签和button标签。在实际应用时候如果涉及到数据的交互使用input，否则可以使用button，可以插入图像，美化按钮。
但是也可以css+div标签来做。

<!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>
    <title></title>
</head>
<body>
<form name="form1" method="get" action="text.htm">
你喜欢的水果有：<br />
    <input id="checkbox1" type="checkbox" checked="checked" /> <label for="checkbox1">苹果</label><br />
    <input id="checkbox2" type="checkbox" /><label for="checkbox2">banana</label><br />
    <input id="checkbox3" type="checkbox" /><label for="checkbox3">pear</label>
    <br />
<!--按钮示例-->
    账号：<input type="text" /><br />
    密码：<input type="password"" /><br />
    <input type="submit" value="提交" />
    <input type="reset" value="重置" />
    <br />
    <input type="file" />

    <!--隐藏域-->
    <input type="hidden" value="10" />
    <!--下拉列表-->

</form>
<select >
    <option>HTML</option>
    <option>CSS</option>
    <option>JS</option>
    <option>JSP.NET</option>
    <option>JavaScript</option>
    <option>ASP.NET</option>
     <option>Ajax</option>
 </select>
 <div>
 <!--按钮实验-->
 采用的是input标签：<input type="button" value="训练" /> <br />
 采用button标签：<button><img src="img/button.jpg" alt="" style="width:40px;height:20px;" /></button>

 </div>
</body>
</html>

效果图如下：
这里写图片描述

12.小技巧
在进行vs2010进行HTML开发的时候，经常忘记空间，可以在工具箱-》HTML工具直接拖拉就可以了。

13.表单元素不一定都要放在form标签内。对于要与服务器进行交互（也可以说是跟网站后台进行交互）的表单元素就必须放在form标签内才有效。然后，如果表单元素不需要跟服务器进行交互，那就没必要放在form标签内。

14.综合示例

<!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>
    <title></title>
</head>
<body>
<form name="form1" method="get" action="text.htm">
<div>
    昵称：<input id="Text1" type="text" /><br />
    密码：<input id="Password1" type="password" /><br />
    邮箱：<input id="Text2" type="text" />&nbsp;&nbsp;<select id="Select1"><br />
        <option>qq.com</option>
        <option>163.con</option>
        <option>google.com</option>
    </select>
</div>
<div>
    性别：<input id="Radio1" type="radio" />男；<input id="Radio1" type="radio" />女；<br />
    兴趣：<input id="Checkbox1" type="checkbox" />旅游；<input id="Checkbox2" type="checkbox" />摄影；<input
        id="Checkbox3" type="checkbox" />运动；<br />
  </div>
  <div>
    个人介绍：<br />
      <textarea id="TextArea1" cols="20" rows="2">毛扇指千镇，铁马踏冰河</textarea><br />
  </div>
 <div>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input id="Button1" type="button" value="注册" />
 </div>
<br />
上传个人照片：
<input id="Text3" type="file" />
</form>
</body>
</html>