原文: Text Box in HTML – The Input Field HTML Tag

在这篇文章中,你将学习如何在 HTML 中创建一个文本输入字段。你还将了解 web 表单,并对其工作原理有一个概括的认识,因为文本框是表单的共同特征。

让我们开始吧!

web 表单是什么

表单是收集信息的一种有效方式。

在很多情况下,你需要填写一个实体的表格、一个打印的实体文件,并提供个人的详细资料。

例如,当你开始一份新工作时,或当你去做体检时,或当你在租/买房子的过程中,或任何其他需要文书工作的时候,你可能会填写一份表格并把它交给某人。

就像实体表格一样,在线数字 web 表单是一种使用 web 技术组合的方式来接收和收集用户和访问者的输入、信息和重要数据。

web 表格模仿物理表格,包含供用户填写信息的空格。

web 表单使用各种工具或表格控件来收集用户的输入。

一个网站可以有一个搜索框,或一个文本输入栏,用于输入一行文本。这使用户能够搜索特定的东西。

一个网站也可以包含一个注册表,让用户注册一个新闻简报或其他更新。

这通常会包含一个文本输入字段,用于输入用户的名字、姓氏和电子邮件地址。

当用户在进行网上购物时,许多网站也有注册/登录表单。例如,用户在一个文本字段中输入他们的用户名,在另一个字段中输入他们的密码。虽然密码字段也是文本字段,但每个文本字符都被一个黑点所掩盖,以隐藏正在输入的内容。

一个网站也可以有一个较大的文本区域,供用户输入较长的文本段落,这对于在博客文章下面留下评论是很有用的。

许多表单还允许用户通过选择一个单选按钮从若干选项中选择一个特定的选项。它们可以让用户通过选中/不选中复选框来选择一个以上的选项。

最后,所有的表单都有一个提交按钮,将数据提交给服务器,在服务器存储或处理数据。

web 表单如何运行

互联网是一个大型的全球网络,连接着世界各地数以百万计的计算机。

作为网络一部分的计算机通过发送和接收信息相互通信。

实现这一目的的方式是得益于 web 客户端/服务器请求/响应架构。

客户端,通常是一个 web 浏览器,如谷歌浏览器,向 web 服务器发送一个请求。

web 服务器是一块计算机硬件或软件,用于存储构成网站的文件,并在收到请求时分发这些文件。

该请求可能是要查看作为网页一部分的表单。

服务器将构成 web 表单的文件作为响应发送回来。然后,web 浏览器将这些文件组合在一起,用户在 web 浏览器中查看表单。

这个请求/响应循环是由一个协议构成的,叫作 HTTP(代表 HyperText Transfer Protocol 超文本传输协议)。

因此,当使用一个 web 表单时,用户输入必要的数据,然后经过客户端验证,检查是否填写了所有需要的字段,以及数据的格式是否正确,用户点击提交按钮。

然后,数据在 HTTP 请求中以名-值对的形式被发送到服务器上。这种用名-值对组织信息的方法可以确保正确的数据与正确的表单元素相对应。

然后,一个服务器端语言,如 PHP、Ruby 或 Python,被用来处理信息,并将其存储在数据库中,以便以后使用或检索。

如何在 HTML 中创建 web 表单

要在 HTML 中创建一个表单,你需要使用 <form> 元素,它是用来收集信息的。

<form> 元素有一个开头的 <form> 标签和结尾的 </form> 标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form>
        
    </form>
</body>
</html>

<form> 元素有两个属性:

  • action 属性,它指定了你希望数据被发送和处理的 URL。
  • method 属性,接受两个 HTTP 动词中的一个作为值,即 GETPOST。如果没有 method 属性,则默认使用 GET 方法。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">

    </form>
</body>
</html>

然而,仅此一项并不收集任何用户输入。

HTML input 元素是什么

<input> 元素最常用于收集和检索 web 表单中的用户数据。

它是用户输入数据的地方。

它被嵌套在 <form> 元素内部,是一个自闭合元素。这意味着它不需要一个结束标签。(关闭标签有一个正斜杠,</>

你用它来创建不同风格的输入字段或表单输入控件,供用户输入各种不同的信息。

它可以创建文本字段、电子邮件字段、密码字段、复选框、单选按钮、下拉菜单、提交按钮,从用户的计算机中选择和上传文件和图像的能力,以及更多。

确定 input 字段或表单输入控件类型的方法是设置 type 属性并为其赋值。

<input> 的语法是这样的:

<input type="value"> <!-- the value of the type attribute determines the style of input field -->

例如,要创建一个允许用户上传文件的字段,<input> 元素是这样的:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <input type="file">
    </form>
</body>
</html>

type 属性决定了该 input 元素可以接受什么样的数据。

如何创建一个 HTML 文本输入框

如果不指定 inputtype 属性,其默认值是文本。所以文本输入是最常见的输入样式。

<input type="text"> 创建了一个单行文本输入框,用户可以在这里输入任何文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter some text below:</p>
        <input type="text">
    </form>
</body>
</html>

当你在浏览器中查看该页面时,你可以看到创建了一个单行文本输入字段:

Screenshot-2022-01-09-at-5.52.22-PM

如何在文本字段中添加占位符文本

占位符文本,也叫填充文本,是一种提示的方式,给用户一个提示,告诉他们需要在表单中填写什么样的信息。它还可以在用户开始输入之前提供一个默认值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your first and last name:</p>
        <input type="text" placeholder="John">
        <input type="text" placeholder="Doe">
    </form>
</body>
</html>

上面代码的结果如下:

Screenshot-2022-01-09-at-6.09.59-PM

文本字段中 name 属性的重要性

当提交表单并将其发送到服务器时,服务器需要区分它所收集的不同种类的提交数据。

例如,它需要知道哪个是用户名、哪个是密码、哪个是电子邮件地址。

这意味着每个文本字段都需要一个 name 属性和一个值,以使提交的数据类型更加清晰。

例如,你可以用下面的方法来提示某人在一个文本字段中输入他们的全名:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your full name:</p>
        <input type="text" name="name" placeholder="John Doe">
    </form>
</body>
</html>
Screenshot-2022-01-09-at-6.28.10-PM

假设用户在文本字段中输入了 “John Bexley” 这个名字。然后,这将成为 name 属性的值。

如前所述,表单中的数据是以名-值对的形式发送的。在这种情况下,服务器会知道用户的 nameJohn Bexley,具体来说,就是 name=John Bexley

再举一个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your first  name:</p>
        <input type="text" name="first_name" placeholder="John">
        <p>Please enter your last  name:</p>
        <input type="text" name="last_name" placeholder="Doe">
    </form>
</body>
</html>

上面的代码有两个独立的文本字段,供用户分别输入他们的名字和姓氏。

如果他们输入 “John” 作为名字,发送到服务器的名-值对将是 first_name=John

如果他们输入 “Bexley” 作为姓氏,发送到服务器的名-值对将是 last_name=Bexley

如何使文本信息是必填的

你可以使某些字段成为必填项,需要用户填写。

HTML5 引入了客户端验证功能。

这是一个功能,如果用户没有填写必要的字段或没有正确输入信息,就会显示一条信息。这也意味着他们将无法提交表单。

为了启用这一功能,你需要做的就是给 <input> 元素添加 required 属性。这个属性不需要一个值。

请记住,在向 <input> 元素添加多个属性时,你不必按照一定的顺序添加元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your first  and last name:</p>
        <input type="text" name="first_name" placeholder="John" required>
        <input type="text" name="last_name" placeholder="Doe" required>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

看看如果一个用户没有填写其中一个字段会发生什么:

Screenshot-2022-01-09-at-6.59.44-PM

如果用户没有填写所需的字段,就会出现一条信息,用户将无法提交表单。

如何设置文本框中的最小和最大字符数

你可以指定用户在一个文本字段中可以输入的最小和最大字符数。

要创建一个最小字符数,请使用 minlength 属性。

例如,你可以让用户的用户名至少有三个字符长:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your username</p>
        <input type="text" name="username" minlength="3" required>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

如果用户名短于三个字符,用户将无法提交表单:

Screenshot-2022-01-10-at-4.04.00-PM

要限制用户在一个文本字段中输入的字符数,可以使用 maxlength 属性。

一个结合 minlengthmaxlength 属性的例子是这样的:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your username</p>
        <input type="text" name="username" minlength="3" maxlength="20" required>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

在上面的例子中,一个用户的用户名必须至少有 3 个字符,并且不超过 20 个字符。

如何使用 label 元素

到目前为止,我一直在使用 <p> 元素在文本框前写一些文字,以这种方式提示用户,让他们知道他们需要输入什么。

但这不是最佳实践。

每个表单控件,在这里是每个文本字段,都应该有自己的 <label> 元素。

这使得使用屏幕阅读器等辅助技术的视力障碍用户能够访问该表单。

一种方法是将任何介绍性文本和 <input type="text"> 嵌套在一个 <label> 元素中,像这样:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <label>
            Please enter your username
            <input type="text" name="username" minlength="3" maxlength="20" required>
        </label>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>
Screenshot-2022-01-10-at-4.58.37-PM

另一种使用 <label> 元素并获得相同结果的方法是将其与 <input> 元素分开。

在这种情况下,需要给 <label> 添加 for 属性,给 <input> 添加 id 属性,以便将两者联系在一起。

for 的值将与 id 相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <label for="username"> Please enter your username:</label>
            <input type="text" id="username" name="username" minlength="3" maxlength="20" required>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

总结

总而言之,要在 HTML 中创建一个文本输入字段,你至少需要:

  • 一个 <input> 元素,这通常是在一个 <form> 元素内。
  • type 属性的值设置为 text。这将创建一个单行文本输入框
  • 不要忘记添加一个 name 属性。这可以识别每个被创建的表单控件的信息,使服务器更清楚地了解情况。

要学习更多关于 HTML 和 CSS 的知识,请查看 freeCodeCamp 的响应式网页设计认证。你可以学习交互式课程,并创建有趣的项目。

谢谢你阅读本文,happy coding!