HTMLHTML 表单 ④ ( textarea 文本域控件 | select 下拉列表控件 )

Posted 2023-03-05 韩曙亮

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTMLHTML 表单 ④ ( textarea 文本域控件 | select 下拉列表控件 )相关的知识，希望对你有一定的参考价值。

文章目录

一、textarea 文本域控件
二、select 下拉列表控件

一、textarea 文本域控件

textarea 文本域控件是多行文本输入框 , 标签语法格式如下 :

<textarea cols="每行文字字符数" rows="文本行数">
	多行文本
	内容
</textarea>

实际开发中并不使用 cols 和 rows 属性 , 直接使用 CSS 设置宽度和高度 ;

多行文本域与单行文本框的区别 :

<input type="text" value="请输入账号"/>

input 文本框表单控件是单标签 , textarea 文本域控件是双标签 ;
单行文本框常用于用户名 , 密码 , 验证码等输入 ;
文本域常用于用户回复 , 回帖 , 留言板等输入 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
		<base target="_blank"/>
    </head>
    <body>
		网友回复 :<br />
		<textarea cols="50" rows="5">
多行文本
内容
		</textarea>
    </body>
</html>

显示效果 :

二、select 下拉列表控件

使用 select 下拉列表控件提供多个选择项供用户选择 , 比单选按钮要节省更多的空间 ;

select 下拉列表控件语法 : 在 <select> 标签中 , 不能为空 , 至少要有一个 option 选项 ;

<select>
  <option selected="selected">下拉选项1</option>
  <option>下拉选项2</option>
  <option>下拉选项3</option>
</select>

如果 option 标签中添加了 selected="selected" 属性 , 该选项是默认选项 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
		<base target="_blank"/>
    </head>
    <body>
		网友回复 :<br />
		<select>
			<option>--请选择选项--</option>
			<option selected="selected">下拉选项1</option>
			<option>下拉选项2</option>
			<option>下拉选项3</option>
		</select>
    </body>
</html>

展示效果 :

以上是关于HTMLHTML 表单 ④ ( textarea 文本域控件 | select 下拉列表控件 )的主要内容，如果未能解决你的问题，请参考以下文章

HTMLHTML 表单 ③ ( label 标签 | 增大表单触发面积 | label 标签包含表单 | 通过 label 标签的 for 属性控制触发表单 )

HTMLHTML 注册表单案例 ① ( 表格设置 | 设置表格位置和大小 | 设置表格标题 | 表单设置 | 表格中设置单选按钮 )

HTMLHTML 注册表单案例 ② ( 表格中的内容设置 | 下拉列表 | 输入文本框 | 复选框 | 文本域 | 图片按钮 | 链接 )