HTML入门:表单设置

你的网络首码项目网 网站建设评论28字数 2131阅读模式

本页介绍创建HTML表单的基础知识。

HTML使我们能够创建表单。在这里,我们的网站可以不仅仅是一本不错的广告手册。表单允许我们构建更多动态网站,使我们的用户可以与之互动。文章源自你的网络首码项目网-https://www.youranweb.com/100.html

HTML表单由任意数量的表单元素组成。这些元素使用户能够执行诸如输入信息或从预设选项中进行选择之类的操作。文章源自你的网络首码项目网-https://www.youranweb.com/100.html

在HTML中,表单是使用<form></form>标记定义的。实际的表单元素在这两个标签之间定义。文章源自你的网络首码项目网-https://www.youranweb.com/100.html

喜欢这个:文章源自你的网络首码项目网-https://www.youranweb.com/100.html

<form>
...
(form elements go here)
...
</form>

<输入>标记

这是HTML表单中最常用的标记。它允许您指定各种类型的用户输入字段,例如文本,单选按钮,复选框等。文章源自你的网络首码项目网-https://www.youranweb.com/100.html

发短信

文本字段用于您希望用户在表单中键入少量文本的情况。文章源自你的网络首码项目网-https://www.youranweb.com/100.html

<form>
    First name: <input type="text" name="firstname">
    Last name: <input type="text" name="lastname">
</form>

单选按钮

单选按钮用于您希望用户从一组预先确定的选项中仅选择一个选项时使用。文章源自你的网络首码项目网-https://www.youranweb.com/100.html

请注意,用户只能选择一个选项。如果他们单击另一个选项,则将选择新选项,并取消选择第一个选项。文章源自你的网络首码项目网-https://www.youranweb.com/100.html

要使用户能够进行多项选择,请使用复选框(如下所示)。文章源自你的网络首码项目网-https://www.youranweb.com/100.html

<form>
    <input type="radio" name="lunch" value="pasta"> Pasta
    <input type="radio" name="lunch" value="risotto"> Risotto
</form>

复选框

复选框类似于单选按钮,但它们使用户能够进行多项选择。文章源自你的网络首码项目网-https://www.youranweb.com/100.html

如果要允许用户进行多个选择,则应使用复选框。文章源自你的网络首码项目网-https://www.youranweb.com/100.html

<form>
    <input type="checkbox" name="technology" value="HTML"> I know HTML
    <input type="checkbox" name="technology" value="CSS"> I know CSS
</form>

提交

提交按钮允许用户实际提交表单。文章源自你的网络首码项目网-https://www.youranweb.com/100.html

<form action="/html/tags/html_form_tag_action.cfm">
    <input type="checkbox" name="technology" value="HTML"> I know HTML
    <input type="checkbox" name="technology" value="CSS"> I know CSS
    <input type="submit">
</form>

选择列表

选择列表是包含选项的下拉列表。这允许用户从预定义选项列表中选择一个选项。文章源自你的网络首码项目网-https://www.youranweb.com/100.html

选择列表是使用<选择>元素和<选项>元素创建的。文章源自你的网络首码项目网-https://www.youranweb.com/100.html

<form>
    <select>
        <option value="sydney">Sydney</option>
        <option value="melbourne">Melbourne</option>
        <option value="cromwell">Cromwell</option>
        <option value="queenstown">Queenstown</option>
    </select>
</form>

文本区域

可以使用<文本区域>元素使用户能够输入比<输入>标记更大的文本块。文章源自你的网络首码项目网-https://www.youranweb.com/100.html

通常,最好使用 属性将用户的输入限制为一定数量的字符。您还可以使用 和 属性来调整宽度和高度。maxlengthcolsrows文章源自你的网络首码项目网-https://www.youranweb.com/100.html

<form>
    <textarea maxlength="100" rows="5" cols="30">Enter comments here.</textarea>
</form>

表单操作

通常,当用户提交表单时,您需要系统对数据执行某些操作。这就是操作页面的用武之地。操作页是表单提交到的页面。此页面可能包含高级脚本或编程,将表单数据插入数据库或向管理员发送电子邮件等。文章源自你的网络首码项目网-https://www.youranweb.com/100.html

创建操作页不在本教程的讨论范围之内。在任何情况下,许多网站托管服务商都提供可用于操作页面功能的脚本,例如在表单完成后向网站站长发送电子邮件。现在,我们将简单地看看如何将表单提交到操作页面。文章源自你的网络首码项目网-https://www.youranweb.com/100.html

您指定具有 该属性的操作页面。action文章源自你的网络首码项目网-https://www.youranweb.com/100.html

<form action="/html/tags/html_form_tag_action.cfm" method="get">
    First name: <input type="text" name="first_name" value="" maxlength="100">
    Last name: <input type="text" name="last_name" value="" maxlength="100">
    <input type="submit" value="Submit">
</form>

成型方法

您可能已经注意到上面的示例使用了一个属性。此属性指定提交表单时要使用的 HTTP 方法。method文章源自你的网络首码项目网-https://www.youranweb.com/100.html

可能的值包括:

get
提交时,表单数据将追加到 URL 中。这意味着在提交表单时,您实际上可以在浏览器的地址栏中看到表单变量。这对于非敏感数据(如搜索引擎的结果页面)可能很方便。它还允许您为页面添加书签,甚至可以从另一个网页链接到该页面。
post
表单数据不会追加到 URL。

提供此属性是可选的。如果您不提供它,则该方法将被发布。

相关文章
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台,所有文章均来自网络和网友投稿,不代表本站任何立场,请勿盲目下载注册参与,以免为您带来不必要的损失。
你的网络首码项目网
  • 声明:首码项目网所有文章均来自网络和投稿,不代表本站立场,请勿盲目下载注册,以免为您带来不必要的损失。《项目投诉》
  • 你的首码项目网

发表评论