当前位置：翔宇亭IT乐园 → IT知识库 → WEB → HTML

HTML 表单中的单行文本控件

减小字体

增大字体作者：本站来源：本站整理发布时间：2023-07-08 08:10:20

在HTML表单中，使用<input type="text">来定义一个单行文本输入域。即这个区域只提供一行文本，无法实现换行。

HTML文本域

HTML 表单中的单行文本框定义方式

在HTML中，使用<input type="text">来定义一个单行文本输入域。

其基本形式如下：

<input type="text" id="txtId" name="txtName" value="预定义的文本">

其中：

type属性是指定input的类型，当其值为"text"时，就定义了单行文本输入域。

id属性是设置该输入域的id值，在一个HTML文档中，其值应是唯一的，可以用于javascript脚本中获取到当前控件对象，以便进行相关操作；或者用于CSS类中以便统一定义其样式。

name属性用于指定该输入域的名称，可以用于提交表单的目的文件通过名称来检索对应的值或使用客户端脚本获取文本框中的值。

value属性给出该输入域的文本信息，这里是“预定义的文本”。

限定单行文本域的宽度

可以使用size属性指定文本框的宽度，也可以使用style属性的CSS来设置文本框的宽度。

当使用size属性设置文本框宽度时，是指文本框显示出来的字符个数（即没有因为宽度不够被文本框遮挡的字符个数）。

<label for="yourName">姓名：</label>

<input type="text" id="yourName" name="yourName" size="40">

<br>

<label for="yourAddr">地址：</label>

<input type="text" id="yourAddr" name="yourAddr" style="width:295px;">

上面两个文本框分别使用size属性和style属性设置了文本框的宽度。

在默认情况下，size的值为20。

其显示效果如下：

HTML中设置文本框的宽度

限定单行文本域可以输入的字符数

有时我们需要限制用户输入的字符个数，这时我们可以借助input的maxlength属性和minlength属性到目的。

maxlength属性是限制用户输入的最多字符数，其是一个非负整数值，当用户的输入超过指定的数目时，将无法将新字符输入到文本框中。

minlength属性是限制用户输入的最少字符数，其值也是一个非负整数值。当用户输入的字符数少于minlength时，提交表单时，浏览器会给出提示。

<label for="yourName">姓名：</label>

<input type="text" id="yourName" name="yourName" maxlength="10">

<br>

<label for="yourAddr">地址：</label>

<input type="text" id="yourAddr" name="yourAddr" minlength="4" maxlength="20">

上面的例子中分别限制两个文本框可输入的最多字符数为10个和20个，第2个文本域还限制了输入的最少字符数，当输入的字符数少于指定的字符数时，当用户提交表单时浏览器会给出下图所示的提示。

HTML 文本域minlength属性

为文本框设置占位提示

在HTML5中，可以使用placeholder属性为文本框添加占位提示信息。占位提示信息显示在文本框中，当该文本框获得焦点或用户输入了内容时，占位提示信息将消失；当用户没有输入任何内容且该文本框未获得焦点时，占位提示信息将重新出现。

<label for="yourName">姓名：</label>

<input type="text" id="yourName" name="yourName" placeholder="输入您的真实姓名">

<br>

<label for="yourAddr">地址：</label>

<input type="text" id="yourAddr" name="yourAddr" placeholder="输入您当前的居住地址">

其显示效果如下：

让文本框自动获得焦点

如果想让页面在加载完毕后，让某个文本框自动获得焦点，我们可以借助autofocus属性来实现。

下面这个例子让第一个文本框自动获得焦点。

<label for="yourName">姓名：</label>

<input type="text" id="yourName" name="yourName" autofocus>

<br>

<label for="yourAddr">地址：</label>

<input type="text" id="yourAddr" name="yourAddr" placeholder="输入您当前的居住地址">

在浏览器中显示的效果如下：

HTML文本框autofocus属性

设置文本框必需填写

如果我们不允许某个文本框为空，我们可以设置它的required属性。

required属性指定当前文本框不可为空。

当用户提交表单且设置required属性的文本框没有获得用户输入时，浏览器会给出必要的提示。

<label for="yourName">姓名：</label>

<input type="text" id="yourName" name="yourName" required>

<br>

<label for="yourAddr">地址：</label>

<input type="text" id="yourAddr" name="yourAddr" placeholder="输入您当前的居住地址">

<br>

<input type="submit">

在谷歌浏览器中显示的效果如下：

设置文本域为只读或禁用状态

有时，我们希望文本域中的内容为只读状态，即禁止用户修改，我们可以使用readonly属性达到此目的。

readonly属性是禁止用户修改文本域中的内容，即只读状态，但文本域仍能获得焦点或失去焦点，用户也可以选中文本域中的文本。提交表单时，设置readonly属性的文本域的值仍能被传递。

disabled属性则是禁用文本域，当某个文本域设置了disabled属性后，该文本域无法获得焦点。提交表单时，该文本域中的内容也不会包含在表单传递的数据中。

<form id="form7" name="form7" action="form_example.asp" method="post">

 <label for="yourName">姓名：</label>

 <input type="text" id="yourName" name="yourName" value='翔宇亭' readonly>

 <br>

 <label for="yourAddr">地址：</label>

 <input type="text" id="yourAddr" name="yourAddr" value="biye5u.com" disabled>

 <br>

 <input type="submit">

</form>

其效果如下：

HTML中设置文本域只读或禁用

从上面的图中可以看出，设置readonly属性的文本域在外观上与未设置readonly属性的文本域没有区别，但是无法修改或删除文本域中的内容；设置了disabled属性的文本域变成灰色，成为不可用状态，该文本域无法获得焦点。

为文本域设置数据列表

有时，文本域中可填内容有限，用户可以根据实际情况为其预先设置数据列表，即为其设置list属性。

list属性为文本域提供数据列表，用户可以在列表中选择数据来完成输入，同时在用户键入数据时，列表中的数据根据用户的输入自动进行匹配过滤。

要完成这个功能，还需要借助datalist元素。

<form id="form8" name="form8" action="form_example.asp" method="post">

 <label for="yourName">姓名：</label>

 <input type="text" id="yourName" name="yourName" list="kxName">

  <datalist id="kxName">

   <option value="刘涛">

   <option value="黄蓉">

   <option value="田忌">

  </datalist> 

<br>

 <label for="yourAddr">地址：</label>

 <input type="text" id="yourAddr" name="yourAddr" value="biye5u.com">

 <br>

 <input type="submit">

</form>

从上面的例子中可以看出，当用户为文本域的list属性值指定为datalist属性的id值时，就将文本域和datalist关联起来了。

其在浏览器中的预览效果如下：

HTML文本域list属性

上图中，当设置了list属性的文本域获得焦点时，将会显示出数据列表，用户选择一个值，可以完成输入。

打开或关闭自动完成功能

HTML文本域的autocomplete属性用于指定当前文本域是否自动完成填充功能。

autocomplete属性主要有两个值：

off：不允许浏览器对该文本域自动填充或列出用户曾经使用的值供用户选择输入。这种情况下往往是出于安全考虑而将其设置为“off”值。

on：允许浏览器自动输入内容。

也可以是"email"，"username"，"organization"，"country"，"sex"，"tel"，"url"等内容，以便填充对应的内容。

<form id="form9" name="form9" action="form_example.asp" method="post">

 <label for="yourName">姓名：</label>

 <input type="text" id="yourName" name="yourName" autocomplete="on">

 <br>

 <label for="yourAddr">地址：</label>

 <input type="text" id="yourAddr" name="yourAddr" autocomplete="off">

 <br>

 <input type="submit">

</form>

设置文本域的样式

我们可以通过style属性为文本域设置相关的样式，也可以使用CSS定义外部样式。

下面的例子为文本域的边框等样式。

<form id="form10" name="form10" action="form_example.asp" method="post">

 <label for="yourName">姓名：</label>

 <input type="text" id="yourName" name="yourName"

     style="border:none;border-bottom:1px solid #ccc;color:DodgerBlue;">

 <br><br>

 <label for="yourAddr">地址：</label>

 <input type="text" id="yourAddr" name="yourAddr"

   style="border:1px solid #dcdcdc;border-radius:3px;line-height:25px;color:#8b008b;font-size:14px;">

 <br>

 <input type="submit">

</form>