文章 合集 资源 图书 工具 捐赠

表单与input元素

从网页采集数据时需要使用表单（form）和一系列的字段（field）元素，填写数据后提交到服务器处理。本文介绍表单、label和input等元素的基本应用，其中， input元素可以创建文本框、密码输入框、按钮、复选框、单选按钮、隐藏字段等类型的字段。后续文章还会介绍HTML5中新增的input类型，如email、range、number、search等，以及更多的字段类型和客户端的数据验证功能。

表单与字段

form元素定义数据表单，在<form>标记中常用的属性包括：

  • id和name，分别标识元素的ID和名称。
  • method，数据提交到服务器的方式，默认为get，也可以使用post。请注意，客户端设置不同的数据提交方法，在服务器就需要使用对应的方法读取表单数据。
  • enctype，默认值为application/x-www-form-urlencoded。如果表单中需要上传文件，需要将属性值设置为multipart/form-data。另外一个属性值text/plain并不常用。
  • action，设置接收表单数据的地址，可以是网关应用，也可以是动态页面等服务器端处理技术。

前面的文章中，使用元素时并没有注重id和name属性的应用，但在表单中需要注意，数据字段向服务器提交数据时，会使用name属性值作为数据名称，所以，字段元素中name属性的设置要格外注意；此外，id属性值应作为元素在页面中的唯一标识，如果在客户端需要JavaScript代码处理字段数据，则通过id属性值可以很方便地获取字段元素。

input元素功能非常强大，它可以通过<input>标记的type属性创建多种类型的数据字段。type属性的默认值为text，即文本框。下面的代码创建了一个简单的表单，其中定义了一个文本框和一个提交表单数据的按钮。

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
   <form action="test.aspx">
       <p>
           <input name="testtext" />
       </p>
       <p>
           <input type="submit" value="提交表单" />
       </p>
   </form>
</body>
</html>

如果读取提交的数据呢？本合集创建的测试环境是ASP.NET窗体项目，我们就使用使用.aspx文件读取提交的数据。在/demo目录中创建test.aspx文件，新建文本类型及选项如下图所示。

创建Web窗体

接下来，修改test.aspx.cs文件的代码如下。

C#
using System;
public partial class demo_test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        foreach(string key in Request.QueryString.Keys)
        {
            Response.Write("<p>");
            Response.Write(key + " : " + Request.QueryString[key]);
            Response.Write("</p>");
        }
    }
}

代码中，在ASP.NET窗体的C#代码中，使用Request对象的QueryString集合读取get方法提交的数据；如果将表单（form）的method属性设置为post，则在服务器端需要使用Request的Form集合读取数据。

下面回到/demo/test.html并运行网站，会看到如下图所示的页面。

简单的表单

在这里，可以输入一些内容，然后点击“提交表单”按钮，此时，表单数据会提交到/demo/test.aspx页面处理，下图显示了输入"测试文本"并提交表单后的效果。

提交表单数据

这里可以看到，通过get方式（默认方式）提交的数据以URL参数的形式提交到服务器，如图中的test.aspx页面地址中问号（?）后面的内容，每个参数使用“名称=值”的形式定义，如果有多个参数，则使用&符号分隔。

实际上，ASP.NET窗体对表单及字段数据的处理进行了深入的包装，开发者只需要在服务器端通过ID值获取Web控件（WebControl）并处理表单数据即可，无须分别编写客户端与服务器端表单处理代码，对于中、小型Web应用，可以极大地提高开发效率。本网站（http://caohuayu.com）和本公众号（CHY软件小屋）后续会有ASP.NET网站开发的合集，读者也可以通过《网站全栈开发指南：HTML+CSS+JavaScript+ASP.NET》一书学习。

下面的示例会继续使用/demo/test.aspx页面读取并显示表单提交的数据，大家需要多观察不同类型的字段提交数据的形式。

按钮类字段

input元素定义的按钮有四种类型，分别是：

  • submit，即提交按钮，点击此按钮会将表单中的字段数据提交到服务器。
  • reset，表单中字段恢复为默认值，即字段元素中value属性设置的值，默认为空白。
  • button，显示为普通按钮，可以使用onclick等事件编写JavaScript代码执行操作。
  • image，图片按钮，使用src属性指定图片位置。由于CSS3样式的功能已十分丰富，此属性并不常用。

此外，可以使用value值设置按钮中显示的文本内容。

下面的代码，通过CSS样式创建圆角和渐变色为背景的提交和重置按钮。

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .button1 {
            border: 1px solid #f5f5f5;
            border-radius: 1em;
            background-image: linear-gradient(#fafafa,orange);
            font-size: 0.9em;
            padding: 0.5em 1.5em;
            color: #333;
        }
    </style>
</head>
<body>
    <form action="test.aspx">
        <p>
            <input name="testtext" />
        </p>
        <p>
            <input type="submit" value="提交表单" class="button1" />
            <input type="reset" value="重置" class="button1" />
        </p>
    </form>
</body>
</html>

页面显示效果如下图所示。

使用按钮样式

本例，点击“提交表单”按钮可将文本框数据提交到服务器，点击“重置”按钮则清空文本框内容。

文本类字段

label元素用于定义标签字段，其功能是显示文本并可与其它字段关联。应用时，可以使用for属性指定关联字段的id值，关联后，点击标签文本也可以使关联字段进入编辑状态，即操作焦点也会进入关联字段；此外，添加了readonly或disabled属性、隐藏字段无法进行编辑，稍后演示。

input元素通过type属性指定具体的字段类型，输入和显示文本内容的基本字段类型包括：

  • 文本框，使用text类型，这也是input元素中type属性的默认值。
  • 密码输入框，使用password类型，默认情况下，输入的字符会显示为掩码字符。

对于文本类字段，其常用的属性包括：

  • maxlength，指定最多输入多少个字符。
  • size，指定字段显示的宽度，单位为字符数。
  • placeholder，指定字段的提示文本，这是HTML5中新增的属性。
  • value，指定字段中显示的默认数据。如字段中有数据（包括默认数据或输入数据）以后，placeholder属性指定的内容将不再显示。

下面的代码显示了输入用户和密码的表单。

HTML
<form action="test.aspx">
    <p>
        <label for="user">用户</label>
        <input id="user" name="user" maxlength="30" size="30"
               placeholder="请输入用户名"/>
    </p>
    <p>
        <label for="pwd">密码</label>
        <input id="pwd" name="pwd" type="password" maxlength="30" size="30"
               placeholder="请输入登录密码"/>
    </p>
    <p>
        <input type="submit" value="提交表单" class="button1" />
    </p>
</form>

页面显示效果如下图所示。

用户与密码输入表单

下图为输入用户和密码并提交的效果。

提交表单数据

复选框

复选框用于“开/关”、“是/否”类的数据，在表单中使用input元素实现，此时应将type属性设置为checkbox。如下面的代码定义了包括两个复选框的表单。

HTML
<form action="test.aspx">
    <p>
        <input type="checkbox" id="chk1" name="chk1" />
        <label for="chk1">选项一</label>
    </p>
    <p>
        <input type="checkbox" id="chk2" name="chk2" />
        <label for="chk2">选项二</label>
    </p>
    <p>
        <input type="submit" value="提交表单" class="button1" />
    </p>
</form>

运行网页，不选中选项一，只选中选项二，然后提交表单，可以看到，选中的复选框提交的数据是字段名称和on，而没有选中的复选框则不会提交数据，如下图所示。

复选框

默认情况下，复选框提交的数据为on，如果需要提交指定的数据，可以通过input元素的value属性指定，如下面的代码。

HTML
<form action="test.aspx">
    <p>
        <input type="checkbox" id="chk1" name="chk1" value="1" />
        <label for="chk1">选项一</label>
    </p>
    <p>
        <input type="checkbox" id="chk2" name="chk2" value="2" />
        <label for="chk2">选项二</label>
    </p>
    <p>
        <input type="submit" value="提交表单" class="button1" />
    </p>
</form>

此表单中，选中选项一时提交的数据为1，选中选项二时提交的数据为2。

单选

使用input元素创建单选字段类型时应将type属性设置为radio。此外，单选字段一般会成组使用，同一组的单选项具有排他性，也就是说，同组的单选字段只能选中一个。将几个单选字段定义在一组时，只需要设置相同的name属性即可，不同选项的数据使用value属性指定，如下面的代码定义了两个单选组。

HTML
<form action="test.aspx">
    <p>
        性别
        <input type="radio" id="male" name="sex" value="1" />
        <label for="male">男</label>
        <input type="radio" id="female" name="sex" value="2" />
        <label for="female">女</label>
    </p>
    <p>
        兴趣组
        <input type="radio" id="basketball" name="club" value="1" />
        <label for="basketball">篮球</label>
        <input type="radio" id="football" name="club" value="2" />
        <label for="football">足球</label>
    </p>
    <p>
        <input type="submit" value="提交表单" class="button1" />
    </p>
</form>

与复选框一样，如果单选组中没有选中选项，则不会提交此名称字段的数据。下图显示了单选组提交数据的效果。

提交单选字段数据

在页面中定义字段组时，还可以使用fieldset和legend元素，其中，fieldset元素定义一个字段组，legend元素定义在fieldset元素中，定义字段组显示的标题。下面的代码使用fieldset和legend元素重新定义性别和兴趣组选项。

HTML
<form action="test.aspx">
    <fieldset>
        <legend>性别</legend>
        <input type="radio" id="male" name="sex" value="1" />
        <label for="male">男</label>
        <input type="radio" id="female" name="sex" value="2" />
        <label for="female">女</label>
    </fieldset>
    <fieldset>
        <legend>兴趣组</legend>
        <input type="radio" id="basketball" name="club" value="1" />
        <label for="basketball">篮球</label>
        <input type="radio" id="football" name="club" value="2" />
        <label for="football">足球</label>
    </fieldset>
    <p>
        <input type="submit" value="提交表单" class="button1" />
    </p>
</form>

页面显示效果如下图所示。

使用fieldset和legend元素定义字段组

readonly和disabled属性

这里关注字段元素中的readonly和disabled属性，首先来看它们在页面中的显示效果，如下面的代码。

HTML
<form action="test.aspx">
    <p>
        <label for="txt1">只读字段</label>
        <input id="txt1" name="txt1" value="只读" readonly />
    </p>
    <p>
        <label for="txt2">无效字段</label>
        <input id="txt2" name="txt2" value="无效" disabled />
    </p>
    <p>
        <input type="submit" value="提交表单" class="button1" />
    </p>
</form>

页面显示及数据提交后的效果如下图所示。

readonly和disabled属性

通过本例可以看到，虽然使用了readonly和disabled属性的字段都无法编辑内容，但其含义是不同的，其中，readonly字段数据可以提交到服务器，而disabled字段数据则不会提交数据。

隐藏字段

将input元素中的type属性设置为hidden时，字段并不会显示在表单中，但value属性的数据会和其它有效的表单数据一同发送到服务器，如下面的代码。

HTML
<form action="test.aspx">
    <p>
        <label for="txt1">字段一</label>
        <input id="txt1" name="txt1" value="常规文本" />
    </p>
    <p>
        <label for="txt2">字段二</label>
        <input id="txt2" name="txt2" type="hidden" value="隐藏文本" />
    </p>
    <p>
        <input type="submit" value="提交表单" class="button1" />
    </p>
</form>

页面显示及提交数据效果如下图所示。

隐藏字段

豫ICP备11002860-1

公安机关备案41152102000002号

http://caohuayu.com    本网站及微信公众号内容均为原创，转载请注明出处