最新消息:周一至周五21:30分QQ群(161510483)直播,零基础免费学谷歌SEO,WEB前端,PHP入门教程

13. html表单

HTML语言学习 林雍岷 155浏览

几乎所有网站都将Web表单用于多种用途,例如论坛和社交网络的用户使用表单来添加内容并与其他用户进行交互。几乎每个网站都使用表单让网站访客联系企业或网站管理人员。本教程将分析表单的功能,从用户输入中收集数据的少量基本控件开始。

html表单概念

HTML表单用于收集访客提供的信息,然后将其发送到服务器。将HTML提供的表单与一些服务器端代码配对非常重要,这些代码将接收和处理认为合适的信息。该处理可以包括例如保存接收到的信息或通过电子邮件发送它。

表单基本上是控件的容器,表单中的每个控件都被认为可以收集用户输入的信息,包括从文本行到文件上传,通过选项,日期,密码等等。用户用数据填写表单后,他们可以将其提交回服务器,以便处理代理管理收集的信息。

以下代码是表单的基本结构,其开始和结束标签包装了一组控件。

<form>
[控件集]
</form>

但是上述代码没有说明如何处理表单以及在何处处理表单。可以为此类信息提供属性,例如:action是告知浏览器处理的位置; method是将表单数据发送到服务器之前浏览器打包数据的方法;target是指将在何处显示处理结果。在这里我们将讨论action属性,而另两个要在实际操作中进行分析。

在action属性中,使用准备好的URI处理提交表格,你可以在新窗口中看到浏览器处理的程序。

<form action="../form-result.php" target="_blank">
  <input type="submit" value="提交">
</form>

表单文本控件

文本输入控件提供了收集文本数据的方法,例如姓名,方向,短语,消息,密码等。在以下我们将分析两种最常用的基本文本控件。

单行文本输入

单行文本输入仅允许输入一行文本使用input元素声明。在这种情况下输入元素应在type属性中显示值”text”。

在单行文本输入中按下ENTER键时,浏览器通常会提交包含它们的表单,而不是传递给控件中的新行。这是由于该控件仅接受一行文本的性质。

控件已经可见,但是如果要收集用户在此控件中输入的数据,则需要一个名称(name)。名称属性的值在服务器端将被识别用户在控件中的输入信息。以下示例展示文本输入的基本操作。此外我们将控件及其标签放在一个段落中,因为这两个控件和一个单元区分开来。

<form action="../form-result.php" target="_blank">
  <p>姓名:<input type="text" name="fullname">
    <input type="submit" value="提交">
  </p>
</form>

发送表单数据后,你可以在浏览器开发工具中清楚地看到服务器端如何接收数据。在那里你还可以看到控件声明的name与用户输入的数据相关联。

多行文本输入

多行文本输入控件与单行文本输入控件非常相似,其主要区别是可以输入多行文本。多行文本控件通常显示为一个框可以同时包含多行文本,有滚动条机制,允许用户查看所有输入的文本,尤其是在长度超出框的边界时。

多行文本输入可以用textarea元素代替,使用name属性为控件提供一个名称,该名称将帮助浏览器处理识别用户提交的数据。

在下面的示例中,我们允许输入两种类型的文本字符串(单行和多行),每个控件都可以更好地收集数据的类型。

<form action="../form-result.php" target="_blank">
  <p>姓名:<input type="text" name="fullname"></p>
  <p>留言:<br>
    <textarea name="message"></textarea>
  </p>
  <input type="submit" value="提交">
</form>

表单选项控件

表单选项控件允许用户从一个预定义的列表值中选择一个或多个选项。主要取决于所使用的元素,可以用不同的样式以及与用户交互的不同机制来显示选项控件,选项列表可以通过三种方式声明:复选框,单选按钮和选择列表。

复选框

复选框是一种特殊类型的选项,可以在用户交互时选中或取消选中,这使得我们可以收集诸如首选项,接受条款和条件,类别,或任何其它可以 “是”或“否” 回答的问题,每个复选框独立于表单中所有其它的复选框。

当type属性中的值是“checkbox”时,复选框用输入元素表示。在这里name属性的值通过选项服务器端而起作用。在以下示例中,一些复选框已声明为选项主题组的一部分。请记住这种聚集只是根据主题和位置进行的,复选框的选择仍然是独立的。

<form action="../../form-result.php" target="_blank">
  <p>选择你的兴趣:<br>
    <input type="checkbox" name="movies">电影<br>
    <input type="checkbox" name="sports">运动<br>
    <input type="checkbox" name="videogames">电子游戏
  </p>
  <p><input type="submit" value="提交"></p>
</form>

在前面的示例中,可能需要注意几个问题,第一个是复选框与描述它的文本之间缺乏关联,换句话说,不能通过单击相关文本来激活复选框。将文本转换为控件的<label>可以很容易地解决这一问题,我们将在本教程的后面部分讨论这一主题。

第二个是关于如何在服务器端接收复选框数据。如果你提交表单,你将看到只有选中的复选框被发送到浏览器处理。考虑到只有复选框数据的存在本身就表示其激活状态,因此它们的值在很大程度上取决于服务器端使用的语言。

html单选按钮

复选框是独立的,可以单独声明,但是单选按钮是需要分组选项才具有含义的,单选按钮组在其行为方面具有特殊性:在所有组中一次只能选择一个选项。这意味着,除其它外,当你选择一个选项时,先前选择的选项将被取消选择。

单选按钮还使用input元素,但type属性中的值是“radio”。这里的情况与复选框的情况有所不同,因为name属性的值需要与同一组中的所有选项共享。换句话说,这是创建一组单选按钮时需要使用的机制。

该值告诉代理程序处理组中选择了哪个选项呢? 这个问题的答案在value属性中。 由于该属性的目的是识别组中的选项,因此每个选项的值都应不同。

在下面的示例中,一组单选按钮被声明只能选择一组与一个选项一致的,在此情况下这绝对是有意义的,因此所有按钮共享相同的名称,并且每个都有不同的值。

<form action="../../form-result.php" target="_blank">
  <p>收入:<br>
    <input type="radio" name="income" value="lowerthan1000">低于¥1,000.00<br>
    <input type="radio" name="income" value="from1000to5000">从¥1,000.00到¥5,000.00<br>
    <input type="radio" name="income" value="higherthan5000">高于¥5,000.00
  </p>
  <p><input type="submit" value="提交"></p>
</form>

在这里,你可以再次看到点击文本没有选上单选按钮,此问题将在本教程的后面部分解决。

html选择列表

选择列表是一个控件,就其机制而言类似于上面分析的两个控件中的任一个控件,具体取决于布尔属性MULTIPLE的存在。此属性从根本上改变列表的行为,通过一次或多次选择一个选项成为可能。

列表的结构主要由两个元素组成:<select>,用作选项的容器; <option>表示控件可能提供的许多选项之一。

缺少MULTIPLE属性时,列表控件的行为类似于单选按钮组,一次只能选择一个选项。下一个示例反映了这种行为。

如果SIZE属性的值为“1”,而MULTIPLE属性不存在,则浏览器通常将此控件显示为下拉列表框。否则控件采用可滚动框的形式。

<form action="../../form-result.php" target="_blank">
  <p>性别:
     <select name="gender">
        <option>男</option>
        <option>女</option>
     </select>
  </p>
  <p><input type="submit" value="提交"></p>
</form>

在上述示例中,你可以看到发送到服务器的是所选<option>的内容。 但是如果认为有必要可以通过声明<option>的属性VALUE来更改。存在此属性时会将其值(而不是元素的内容)发送给浏览器处理。

当出现multiple属性时,列表的行为就像一组复选框,不仅可以同时选择一个选项,而且可以选择多个选项。此配置要求几个方括号跟随作者为name属性选择的任何值。如果不满足此要求,则浏览器处理将仅接收第一个选择的选项。

下一个示例显示了可以不受限制选择的选择列表。它还使用选项中的value属性,以避免在服务器端的数据处理过程中使用不必要的长值。

存在MULTIPLE属性时,大多数浏览器都会自动将控件的显示更改为可滚动框,而与SIZE属性的值无关。

要在多个选项列表中选择多个<option>,用户可以在按住CTRL键的同时单击选项。也可以使用SHIFT键选择范围。

<form action="../../form-result.php" target="_blank">
  <p>选择类别:<br>
    <select multiple name="categories[]">
      <option value="art">艺术与娱乐</option>
      <option value="tv">电视和电影</option>
      <option value="kids">儿童和青少年</option>
      <option value="diy">自己动手</option>
    </select>
  </p>
  <p><input type="submit" value="提交"></p>
</form>

html提交按钮

按钮是一种特殊的控件,旨在以一种单一的方式与用户交互,每次用户按下该按钮时,都会执行一个动作。 按钮的种类繁多,每个按钮在功能或行为方面都有其独特之处,但在这里,我们只分析了两种最常用的基本按钮。

提交按钮

提交按钮具有预定义的操作,即在激活时提交其所属的<form>。 除非提供其它表单提交机制,如果允许用户提交表单,则必须存在此按钮。我们在前面的示例中已经看到了此控件,其行为应该是自然的。

提交按钮随<input>元素一起插入,其TYPE属性中的值为“submit”。VALUE属性在此控件中很重要,因为其值显示为按钮内的标签。以下示例显示带有文本输入和提交按钮的<form>。

<form action="../../form-result.php" target="_blank">
  <p>编辑你的描述:
    <input type="text" name="desc">
    <input type="submit" value="保存">
  </p>
</form>

重置按钮

与提交按钮一样,重置按钮也具有预定义的操作。但是在这种情况下,预定义的操作包括将表单字段重置为其初始值。 换句话说,已重置表单中字段的状态与页面加载时的状态相同。此操作将删除用户已对控件的值进行的所有更改。

在此最好注意,所有控件都可以具有预定义的值,即在加载页面时该值存在于表单中。作者必须指定此默认值的方式取决于控件。若要知道如何在特定控件类型中指定默认值,请检查此列表中控件的引用。

在以下示例中,你将能够测试“重置”按钮的功能。用单行文本输入,几个单选按钮和一个复选框声明了此表单。所有这些控件都有一个默认值,该默认值指定了属性值,并根据情况进行了检查。

<form action="../../form-result.php" target="_blank">
  <p>发送信息:<input type="text" name="message" value="我准备好了!"></p>
  <p>
    <input type="radio" name="when" value="今天" checked>今天<br>
    <input type="radio" name="when" value="明天">明天
  </p>
  <p><input type="checkbox" name="copy" checked>抄送给我</p>
  <p>
    <input type="reset" value="重置表单">
    <input type="submit" value="发送消息">
  </p>
</form>

标签控件

<form>中的几乎所有控件都可以标记。标签控件是值得操作,可增强可访问性。 一段文本和一个控件之间的关联将解决本教程前面的示例中提到的问题,尤其是单选按钮和复选框。

可以使用<label>元素分配标签,将<label>赋给控件的现有两种最简单的方法,将文本和控件都声明为<label>元素的内容。下一个示例使用此方法与标签关联的几个控件。在那里你可以看到单击控件的标签时控件如何接收焦点。

<form action="../../form-result.php" target="_blank">
  <p><label>姓名:<input type="text" name="fullname"></label></p>
  <p>性别:
    <label><input type="radio" name="gender" value="男"> Male</label>
    <label><input type="radio" name="gender" value="女"> Female</label>
  </p>
  <p><label><input type="checkbox" name="newsletter">我想收到的简讯</label></p>
  <p><input type="submit" value="提交"></p>
</form>

如你所见仅应用于客户端处理浏览器收到的数据没有有关控件分组的信息。

html表单的完整代码

我们将在本教程系统提供html表单的完整代码,在本教程系列中为网站建立一个基本的联系表单。在开始之前你需要在网站的根目录中创建一个新文件(如教程“html响应式布局”中所示),并用HTML文档的基本结构填充该文件(如教程“认识html文档的基本结构”) 。你可以将此新文件称为“ contact.html”。

请注意鉴于本网站的范围,该做法将不包括用于处理表单数据的服务器端编码机制。这应该包含一个脚本,该脚本以你将使用的服务器支持的服务器端语言编写如php。你可以在HTML之外的部分中找到有关此项目的更多信息。

因此一旦我们准备好文件,我们将开始添加标题和一小段文字以向访问者介绍此表单。请记住这里我们将只处理内部的所有内容,而其余的内容(如)应该在你的文件中。

<h1>有话要说吗?</h1>
<p>通过此表格,您可以向我发送一条消息,以帮助我消除页面中的错误,改善我的博客或只是打个招呼。 您必须说的任何话都是非常受欢迎的,所以请不要犹豫,只说几句话。 我很乐意给您回信!</p>

我们有了框架,让我们运行<form>。 首先我们要创建<form>容器,并在其ACTION属性中指定应该处理表单数据的脚本的URL。 在这里我将输入我的浏览器地址,但是一旦准备好进入下一个级别,就应该尝试构建自己的浏览器并更新ACTION属性的值。我还添加了TARGET属性,以避免在测试过程中令人讨厌的重定向。

<h1>有话要说吗?</h1>
<p>通过此表格,您可以向我发送一条消息,以帮助我消除页面中的错误,改善我的博客或只是打个招呼。 您必须说的任何话都是非常受欢迎的,所以请不要犹豫,只说几句话。 我很乐意给您回信!</p>
<form action="../../form-result.php" target="_blank">

</form>

接下来的事情是确定要添加到<form>中的字段。 让我们看看,我们需要人们与我们联系并发送消息。我们可以使用多行文本输入来收集此信息,但是我们也想知道谁在写东西,所以我们需要一个name属性值。这是单行文本输入的工作,最后如果我们打算回答该消息,则还需要一个电子邮件地址。为此我们使用单行文本输入,你也可以尝试使用电子邮件输入。

我们将使用段落来展示这些控件中的每个控件以及与它们相关的文本。请记住插入的单行文本输入带有<input>元素,其type属性具有值“text”,而多行文本输入带有<textarea>元素。

<h1>有话要说吗?</h1>
<p>通过此表格,您可以向我发送一条消息,以帮助我消除页面中的错误,改善我的博客或只是打个招呼。 您必须说的任何话都是非常受欢迎的,所以请不要犹豫,只说几句话。 我很乐意给您回信!</p>
<form action="../../form-result.php" target="_blank">
  <p>姓名:<input type="text" name="fullname"></p>
  <p>邮箱:<input type="text" name="email"></p>
  <p>留言:<br>
    <textarea name="message"></textarea>
  </p>
</form>

这看起来不错,但是在我们提供一个提交按钮之前,用户将无法发送此<form>。 我们使用TYPE属性中值为“ submit”的<input>元素执行此操作。此外我们设置了一个重置按钮,以防用户需要所有输入信息并重新开始。

<h1>有话要说吗?</h1>
<p>通过此表格,您可以向我发送一条消息,以帮助我消除页面中的错误,改善我的博客或只是打个招呼。 您必须说的任何话都是非常受欢迎的,所以请不要犹豫,只说几句话。 我很乐意给您回信!</p>
<form action="../../form-result.php" target="_blank">
  <p>姓名:<input type="text" name="fullname"></p>
  <p>邮箱:<input type="text" name="email"></p>
  <p>留言:<br>
    <textarea name="message"></textarea>
  </p>
  <p>
    <input type="submit" value="发送消息">
    <input type="reset" value="重新填写">
  </p>
</form>

是时候关联控件标签了,我们将为<form>中的每个控件正确定义一个标签,该过程非常简单包括用<label>元素包装控件及其标签。

<h1>有话要说吗?</h1>
<p>通过此表格,您可以向我发送一条消息,以帮助我消除页面中的错误,改善我的博客或只是打个招呼。 您必须说的任何话都是非常受欢迎的,所以请不要犹豫,只说几句话。 我很乐意给您回信!</p>
<form action="../../form-result.php" target="_blank">
  <p><label>姓名:<input type="text" name="fullname"></label></p>
  <p><label>邮箱:<input type="text" name="email"></label></p>
  <p><label>留言:<br>
    <textarea name="message"></textarea></label>
  </p>
  <p>
    <input type="submit" value="发送消息">
    <input type="reset" value="重新填写">
  </p>
</form>

我们将控件按主题进行分组,我们将分两个步骤进行操作:首先我们将使用到目前为止的内容创建一组控件; 其次我们将添加一个带有一些复选框的新组。

首先,我们用<fieldset>元素包装<form>中已经存在的控件(单行文本输入和多行文本输入)。 另外我们通过在组的开始处,在<fieldset>开头标记之后插入<legend>来为组添加标题。

<h1>有话要说吗?</h1>
<p>通过此表格,您可以向我发送一条消息,以帮助我消除页面中的错误,改善我的博客或只是打个招呼。 您必须说的任何话都是非常受欢迎的,所以请不要犹豫,只说几句话。 我很乐意给您回信!</p>
<form action="../../form-result.php" target="_blank">
  <fieldset>
  <legend>留言</legend>
  <p><label>姓名:<input type="text" name="fullname"></label></p>
  <p><label>邮箱:<input type="text" name="email"></label></p>
  <p><label>留言:<br>
    <textarea name="message"></textarea></label>
  </p>
</fieldset>
  <p>
    <input type="submit" value="发送消息">
    <input type="reset" value="重新填写">
  </p>
</form>

现在我们将为其添加新的字段集,我们为访问者提供了你以后愿意谈论的主题列表。这将使用户与你联系,对他们希望在你的网站上看到更多帖子的主题进行投票。

<h1>有话要说吗?</h1>
<p>通过此表格,您可以向我发送一条消息,以帮助我消除页面中的错误,改善我的博客或只是打个招呼。 您必须说的任何话都是非常受欢迎的,所以请不要犹豫,只说几句话。 我很乐意给您回信!</p>
<form action="../../form-result.php" target="_blank">
  <fieldset>
  <legend>留言</legend>
  <p><label>姓名:<input type="text" name="fullname"></label></p>
  <p><label>邮箱:<input type="text" name="email"></label></p>
  <p><label>留言:<br>
    <textarea name="message"></textarea></label>
  </p>
</fieldset>
<fieldset>
    <legend>新话题</legend>
    <p>你希望我在网站上谈论什么话题?<br>
      <label><input type="checkbox" name="html">HTML</label>
      <label><input type="checkbox" name="graphics">图像</label>
      <label><input type="checkbox" name="videogames">电子游戏</label>
      <label><input type="checkbox" name="art">艺术作品</label>
      <label><input type="checkbox" name="music">音乐</label>
    </p>
  </fieldset>
  <p>
    <input type="submit" value="发送消息">
    <input type="reset" value="重新填写">
  </p>
</form>

表单是HTML难于学习的功能,如果希望表单有意义就需要使用某种脚本来支持它们,无论是服务器端还是客户端。它们也非常强大,特别是在开发复杂应用程序时。

在本教程中处理的主题仅限于与HTML有关的,几乎不关注服务器端执行的操作。 但这足以让你了解表单如何在HTML中工作。每当你跳到服务器端脚本区域时,以更好地了解<form>发送的数据的处理。

转载请注明:林雍岷 » 13. html表单