这是我参与「第四届青训营 」笔记创作活动的第九天

HTML基础知识总结(九)

接上一篇文章，本 章 着 重 复 习 Html 的 基 础 内 容 ， 学 习 Html 究 竟 要 学 些 什 么 呢 ？ 主 要 是 学 习 ，来 搭 建 网 页 的 “ 结 构 ” 。

在 HTML 中 ， 一 个 完 整 的 表 单 通 常 由 表 单 控 件 （ 也 称 为 表 单 元 素 ）、 提 示 信 息 和 表单域 3 个 部 分 构 成 。 我们本篇介绍一下： select 下拉表单元素 和 textarea 文本域表单元素！！！

一、select 下拉表单元素

1.概述：

select 元素是一种表单控件，可用于在表单中接受用户输入。

select 元素可创建单选或多选菜单。

当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。

2.基本的语法：

<form>
        籍贯:
        <select>
            <option selected="selected">北京</option>
            <option>上海</option>
            <option>河南</option>
            <option>山东</option>            
        </select>
    </form>

3.效果如图：

我们可以让用户选择籍贯，从“北京”，“上海”，“河南”，“山东”等4个城市中，选择一个城市，进行提交数据！！！

4.注意:

(1)子元素：option，指定列表项。

有几个option ，在下拉框里面，就会有几个列表项。

<select></select>中至少应包含一对<option></option>

(2)selected="selected" 设置默认的选项。

在 option 中定义selected =" selected"时，当前项即为默认选中项。

 <option selected="selected">北京</option>

可以设置默认的城市选项是“北京”。

二、textarea 文本域表单元素

1.概述：

如果需要输入大量的信息，就需要用到<textarea></textarea>标签。

通过 textarea 控件可以轻松地创建多行文本输入框，其基本语法格式如下：

rows：

行数，文本域有多少行。

cols：

列数，每一列有多少字符。

2.基本的语法：

<form>
        <!--textarea中间写的是：提示文字。-->
        今日反馈：
        <textarea rows="10" cols="50">我喜欢中国！! ！
        </textarea>
    </form>

3.效果如图：

我们可以看到，最后形成了一个，大的文本输入框，并且默认显示的有文字"我喜欢中国！！！"。 可以提示用户输入什么内容。

4.文 本 框 和 文 本 域 区 别

表 单 名 称 区 别 和 默 认 值 显 示 的地方不同！！！

input ty pe="text " 文 本 框 只 能 显 示 一 行 文 本 单 标 签 ， 通 过 va lue 显 示 默 认 值 。 如：用 户 名 、 昵 称 、 密 码 等。

textarea 文 本 域 可 以 显 示 多 行 文 本 双 标 签 ， 默 认 值 写 到 标 签 中 间 留 言