Java学习10.!9(Javaweb 常用表单元素2)
3.单选按钮
如果用户要输入的信息只有少数几种可能,这时应该使用单选按钮。
![](https://img2020.cnblogs.com/blog/2024377/202012/2024377-20201223135542264-119378999.png)
单选按钮的基本格式如下:
<input type="radio" name="输入信息的名字" value="输入信息的值">显示的信息
type |
属性的值为“radio”,说明这个表单元素是单选按钮
|
name
|
表格的名称 |
value
|
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;
单选按钮的基本格式与输入框基本相同,不同的是,type 对应的值为“radio”。
有多少个可能的选项就需要多少个单选按钮。如果需要使用默认值,则可使用 checked。
4.复选框
复选框与单选按钮非常类似,相同的地方是:
● 一般都不单独出现,而是成组出现。
● 同一组的名字相同。
● 必须指定值。
● 选择哪一个选项,得到的是这个选项对应的值。
● 每个选项的值和显示给用户看的信息是独立的。
不同的地方是:
● 单选按钮对应的 type 属性的值是“radio”,而复选框对应的 type 属性的值是
“checkbox”。
● 单选按钮只能选择一个,而复选框能选择多个。
下面是一个复选框的例子,用于选择个人的爱好。因为个人的爱好可以是多个,所以允许多选,应该使用复选框。
<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 |
type 的值为“checkbox”,说明这些元素是复选框。
|
name |
4 个复选框的name都是 like,所以这是一组复选框
|
value |
4 个复选框的value值不同,分别是 1、2、3 和 4,而用户看到的则是运动、看电影、听音乐和读书
|
5.下拉框
从功能上来说,下拉框具有单选按钮和复选框两者的功能。
![](https://img2020.cnblogs.com/blog/2024377/202012/2024377-20201223140029572-2035763839.png)
下拉框的基本格式:
<select name="下拉框的名字" [multiple] [size=n]>
<option value="值 1" [selected]>值 1</option>
<option value="值 2" [selected]>值 2</option>
<option value="值 3" [selected]>值 3</option>
<option value="值 4" [selected]>值 4</option>
<option value="值 n" [selected]>值 n</option>
</select>
![](https://img2020.cnblogs.com/blog/2024377/202012/2024377-20201223140114472-849625254.png)
下拉框由两部分组成:第一部分是下拉框本身;第二部分是多个下拉框选项。
开始标志 | 开始标志是<select name…>,name表示下拉框的名字,是必需的,它与前面介绍的其他元素的名字的作用相同。 |
结束标志 |
结束标志是</select>
|
multiple 属性
|
用于确定下拉框中的元素是否允许多选,如果允许多选,需要写这个属性,如果不允许多选,则不用写,默认是单选。
|
size 属性
|
用于确定下拉框的显示形式,如果 size 等于 1,则采用下拉框的形式;如果 size 大于 1,则采用具有滚动条的列表框的形式,
默认情况下是下拉框的形式。
|
option 标签
|
下拉框中的每个选项对应一个 option 标签,开始标志是<option…>,结束标志是</option>,中间是显示给用户的选项
|
value
|
在开始标志中,可以使用 value 指定这个选项的值,这与单选按钮和复选框的用法类似。
|
selected
|
如果使用selected这个属性,表示这个选项被选上了。如果想设定当前选项为默认选项,则可以使用 selected属性。如:
<option value="华东" selected>华东</option>
|
6.文本域
文本域主要用于输入多行文字,如果输入的文字比较多,则可以采用文本域。
文本域的基本格式如下:
<textarea rows="行数" name="文本域名字" cols="列数">默认值</textarea>
开始标志 |
<textarea…>,标签的默认值
|
结束标志 |
结束标志</textarea>
|
name
|
name 属性的作用同样是指出表单元素的名字,使用 rows 指定文本域的行数,使用 cols 指定文本域的列数。
|
例:<textarea rows="8" name="comment" cols="40">默认值</textarea>
注:文本域不是通过 value 属性赋值的,而是把值写在开始标志和结束标志之间。
7.重置按钮
点击重置按钮可以把所有的输入信息取消,让输入界面恢复到最初的状态。
![](https://img2020.cnblogs.com/blog/2024377/202012/2024377-20201223141535680-687400880.png)
![](https://img2020.cnblogs.com/blog/2024377/202012/2024377-20201223141547936-810029004.png)
重置按钮的基本格式如下:
<input type="reset" value="重置">
type |
重置按钮的 type 值为 reset
|
name |
在这个格式中没有看到 name 属性,这里把 name 属性省略了,因为这个表单元素比较特殊,特殊的地方在于
它不是用于提交信息的,所以不用给出名字,系统会给一个默认名字
|
value |
value 属性指出这个按钮上显示的内容。
|
8.提交按钮
只要涉及提交信息,都应该提供一个提交按钮,当点击提交按钮的时候,用户输入的信息将提交给服务器,意味着输入过程的结束。注册界面中也包含一个提交按钮。
提交按钮的基本格式如下:
<input type="submit" value="提交">