Java Web基础：第十一讲基本表单元素

关注

原创最新推荐文章于 2026-03-27 09:27:28 发布 3.9k 阅读 AI 写同款· GEO 优化 ›

【Web前端笔记03】表单目录章节03 表单一、Form表单二、表单元素 1、表单 2、表单元素三、HTML5 新增 type 类型 1、email 2、url 3、search 4、tel 5、color 6、number 7、range 8、date 9、month 10、year 四、HTML5 新增属性 1、autofocus属性 2、multiple属性 3、placeholder属性 4、required属性五、实体字符章节03 表单一、Form表单... 阅读详情

什么是表单元素呢？在注册功能中，输入用户名、输入口令、输入生日、选择学历、选择地区、输入地址信息的输入框、下拉框、单选按钮都是表单元素。之所以能够显示成我们看到的样子是因为他们对应的是html 代码。要完成输入功能，需要使用HTML 语言提供的这些表单元素，下面介绍常用的表单元素。

单行文本框

在注册功能中，输入用户名和生日的输入框，就是单行文本框。需要输入少量信息的时候应该使用单行文本框。

基本语法格式如下：

其中，属性type 用于确定表单元素的类型，后面我们会看到很多表单元素的格式非常类似，值为“text ”表示这是一个单行文本框，属性name 的值表示要输入的信息的名字，属性value 的值表示这个文本框的值，通常不需要value 属性，它的值一般是让用户输入的。如果需要给这个输入框默认值，可以使用这个属性给定默认值。

在注册功能中，输入用户名的代码为：

用户名对应的文本框的名字是username ，服务器在获取用户输入的信息的时候会使用这个名字。

在注册功能中，输入生日的代码为：

该文本框的名字是birthday ，并且使用value 指定它的值为“1988-1-1 ”，如果用户不修改这个值，它将作为用户生日的默认值。

请记住：<input type="text"> 表示单行文本框，name 用于指定元素的名字，value 可以指定默认值。

注意：name 属性的值不能与其它表单元素的值相同，也就是不能出现同名的表单元素。

密码框

在注册功能设置密码的时候使用两个密码框。通常在设置密码和身份验证的时候会使用密码框。密码框的特点是在输入信息之后，界面上并不显示用户输入的信息，而是显示“* ”号或者“. ”。但是用户提交给服务器的信息不是“* ”号或者“. ”。

密码框的基本格式如下：

这个格式与单行文本框非常类似，不同的是type 属性的值，这里type 属性的值为“password ”，说明这个表单元素是密码框，另外两个属性的作用与单行文本框完全相同。

请记住：密码框与单行本文框的区别是，密码框对应的type 的值为“password ”。

注意：只要是设置密码就应该让用户输入两遍密码。因为输入密码之后显示“* ”号，这样如果用户输入错误了，用户也不知道输入错误，以后使用就麻烦了。如果输入两遍则可以解决这个问题，因为只有两次输入了相同的错误内容才可能将错误密码设置成功，而出现两次相同的错误的概率非常低。

单选按钮

在注册功能中，用户选择学历使用的是单选按钮，并且是多个单选按钮，每个选项对应一个单选按钮，用户只能选择其中一个，这多个单选按钮的格式相同。如果用户要输入的信息只有少数几种可能，这时候应该使用单选按钮。

单选按钮的基本格式如下：

<input type="radio" name=" 输入信息的名字" value=" 输入信息的值"> 显示的信息

与单行本文框格式基本相同，type 属性的值为“radio ”，说明这个表单元素是单选按钮。name 仍然是元素的名字，value 属性的值是这个单选按钮的值。这个值不会显示给用户，用户能够看到的是标签后面的部分。

单选按钮通常不独立出现，每一种可能的选项就对应一个单选按钮，每个单选按钮对应一个不同的值，用户选择哪个单选按钮，哪个单选按钮的值就可以传递到服务器。

注册功能中，用户选择学历对应的代码如下：

<input type="radio" name="degree" value="1"> 专科

<input type="radio" name="degree" value="2" checked> 本科

<input type="radio" name="degree" value="3"> 硕士研究生

<input type="radio" name="degree" value="4"> 博士研究生

这里学历有4 个选项，所以有4 个单选按钮，且这4 个单选按钮的名字是相同的。用户会在4 种情况中选择一个，所以这4 个单选按钮的值不同，分别是1 、2 、3 和4 。用户看不到单选按钮的值，用户看到的是每个标签后的文字，专科、本科、硕士研究生、博士研究生等。如果用户选择专科，得到的值将是1 ，如果用户选择的是本科，得到的值将是2…

请记住：单选按钮的基本格式与输入框基本相同，不同的是type 对应的值为“radio ”。有多少个可能的选项就需要多少个单选按钮。如果需要使用默认值，使用checked 。

注意两点：

u 一组单选按钮的名字必须相同，但是值不同。

u 单选按钮的值与用户看到的在界面上显示的信息没有关系。

复选框

复选框与单选按钮非常类似，相同的地方：

n 一般都不单独出现，而是成组出现。

n 同一组复选框或者单选按钮的名字相同。

n 必须指定值。

n 选择哪一个选项，得到的是这个选项对应的值。

n 每个选项的值和显示给用户看的信息是独立的。

不同的地方：

n 单选按钮对应的type 属性的值是“radio ”，而复选框对应的type 属性的值是“checkbox ”。

n 单选按钮只能选择一个，而复选框能选择多个。

注册功能中没有使用到复选框，下面是一个复选框的例子，用于选择个人的爱好。因为个人的爱好可以是多个，所以允许多选，应该使用复选框。

<input type="checkbox" name="like" value="1"> 运动

<input type="checkbox" name="like" value="2"> 看电影

<input type="checkbox" name="like" value="3"> 听音乐

<input type="checkbox" name="like" value="4"> 读书

type 的值为checkbox ，说明这些元素是复选框。4 个复选框的名字都是like ，所以这是一组复选框。4 个复选框的值不同，分别是1 、2 、3 和4 。而用户看到的则是运动、看电影、听音乐和读书。

下拉框

在注册功能中，地区的选择使用了下拉框，可以从地区中选择一个地区。在这个例子中，只允许选择一个，在有些情况下，下拉框可以进行多选。所以，从功能上来说，下拉框具有单选按钮和复选框两者的功能。

下拉框的基本格式：

...

</select>

从这个格式可以看出，下拉框与前面的几个表单元素的格式完全不同。下拉框有两部分组成：第一部分是下拉框本身；第二部分是多个下拉框选项。

下拉框本身的开始标志是<select name…> ，结束标志是</select> 。在开始标志中，name 表示下拉框的名字，是必须的，与前面介绍的其他元素的名字的作用相同。multiple 属性用于确定下拉框中的元素是否允许多选，如果允许多选，需要写这个属性，如果不允许多选，则不用写，默认是单选。size 属性用于确定下拉框的显示形式，如果size 等于1 ，采用下拉框的形式；如果size 大于1 ，采用具有滚动条的列表框的形式。默认情况下是下拉框的形式。

下拉框中的每个选项对应一个option 标签，开始标志是<option…> ，结束标志是</option> ，中间是显示给用户的选项。在开始标志中，可以使用value 指定这个选项的值，与单选按钮和复选框的用法类似。另外在开始标志中，可以使用selected 属性，如果使用这个属性，表示整个选项被选上了。如果想设定当前选项为默认选项，可以使用selected 属性。

注册功能中，地区选择所使用的下拉框的代码如下：