原文: HTML TextArea – How to Add a Text Box Input Type Tag to Your Website,作者:Joel Olawanle

译者: Miya Liu

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

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

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

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

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

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>

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

<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> 标签定义。你可以使用它来收集无限制的多行文本,例如评论。

你可以通过 colsrows 属性(或使用 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 标签一样,我们可以将 maxlengthminlengthplaceholder 属性添加到 textarea 字段。

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

小结

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

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

祝你编程愉快!