一、单行文本框简介

在HTML中,单行文本框是使用input标签来实现的,其中type属性取值为“text”。单行文本框常见于注册登录中。

语法:

<input type="text" />

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <form method="post"> 姓名:<input type="text" /> </form> </body> </html>

浏览器预览效果如下图所示。

二、单行文本框属性

在HTML中,单行文本框常用属性如下表所示。

表1 单行文本框常用属性
属性 说明
value 设置文本框的默认值,也就是默认情况下文本框
size 设置文本框的长度
maxlength 设置文本框中最多可以输入的字符数

对于元素属性的定义,是没有先后顺序的,你可以将value定义在前面,也可以定义在后面,都无所谓。

举例:value属性

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <form method="post"> 姓名:<input type="text" /><br /> 姓名:<input type="text" value="helicopter"/> </form> </body> </html>

浏览器预览效果如下图所示。

分析:

value属性用于设置单行文本框中默认的文本,如果没有设置,就是空白。

举例:size属性

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <form method="post"> 姓名:<input type="text" size="20"/><br /> 姓名:<input type="text" size="10"/> </form> </body> </html>

浏览器预览效果如下图所示。

分析:

size属性可以用来设置单行文本框的长度,不过在实际开发中,我们一般不会用到这个属性,而是使用CSS来控制。

举例:maxlength属性

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <form method="post"> 姓名:<input type="text" /> 姓名:<input type="text" maxlength="5"/> </form> </body> </html>

浏览器预览效果如下图所示。

分析:

从外观上看不出maxlength加上与不加上有什么区别,不过当我们输入内容后,会发现设置maxlength="5"的单行文本框最多只能输入5个字符,如下图所示。