原文： HTML textarea – How to Add a Text Box Input Type Tag to Your Website

文本框是你网站的一部分，用户可以在其中输入文本。当你点击文本框或其内部时，会出现一个闪烁的光标，表示你已准备好开始输入。如果你使用的是平板电脑或智能手机，则会出现一个屏幕键盘。

文本框分为两种类型：文本字段和文本区域。这两个文本框有不同的用途，可以帮助你的用户了解他们应该在文本框中输入的内容。

文本字段是一个小的通常为矩形的框，你可以在其中输入单行文本，例如名称、数字或任何其他短文本类型。

文本区域是一个较大的框，你可以在其中输入多行文本，例如描述、段落等。

当你在文本字段中点击输入按钮时，光标将移动到以下字段或提交表单。另一方面，在文本区域中，光标将移动到新行，从而创建换行符。

s_64572030E8D25CA21F18BD5EC8523ECF39BB95CA9E14781CDD6E156EE366692C_1661531495728_Untitled.drawio+1

如何向你的网站添加文本字段

每当你希望用户在网页中输入内容时，都可以使用 <input> 标签。然后，为了确保这是一个文本字段，你可以添加 type 属性为 text：

<form>
  <input type='text' />
</form>

这将在我们的网页上输出一个单行文本字段，它可以接受所有形式的文本值。我们还可以添加 label 标签或其他属性，如占位符属性 placeholder，让用户知道在文本字段中输入什么。

<form>
  <input type='text' placeholder='Enter your name...' />
</form>

Or

<form>
  <label>Name:</label> </br>
  <input type='text' />
</form>

我们可以在文本字段上定义更多属性，例如 maxlength 和 minlength，以帮助定义字段可以接受的最大或最小文本量。

<form>
  <input type='text' maxlength="100" minlength="10" placeholder='Enter your name' />
</form>

我们还可以通过 value 属性将默认值传递给文本字段：

<form>
  <input type='text' value='John Doe' placeholder='Enter your name...' />
</form>
s_64572030E8D25CA21F18BD5EC8523ECF39BB95CA9E14781CDD6E156EE366692C_1661546622536_image

如何给你的网站添加文本区域

文本区域由 <textarea> 标签定义。你可以使用它来收集无限制的多行文本，例如评论。

你可以通过 cols 和 rows 属性（或使用 CSS）来指定文本区域的大小。

<form>
  <textarea rows="5" cols="33"></textarea>
</form>

textarea 字段不使用 value 属性传入默认值，但你可以在开始和结束标签之间放置默认内容。

<form>
  <textarea rows="5" cols="33">
    This is the default comment...  
  </textarea>
</form>
s_64572030E8D25CA21F18BD5EC8523ECF39BB95CA9E14781CDD6E156EE366692C_1661546930588_image

与 input 标签一样，我们可以将 maxlength、minlength 和 placeholder 属性添加到 textarea 字段。

<form>
  <textarea placeholder='Enter comment...' maxlength='1000' minlength='100'>
    This is the default comment...  
  </textarea>
</form>

小结

在本文中，你学习了如何使用 <textarea/> 和 <input/> 标签将文本框添加到你的网站，具体取决于你希望添加的文本类型。

你可以在以下资源中了解有关 HTML 标签的更多信息：

祝你编程愉快！