HTML下拉列表 textarea 分组 隐藏域

下拉列表

.下拉列表的好处：

1.节省页面空间，使得页面更加简洁

2.方便输入

3.规范输入

代码如下：

<form action="reseult.html"method="get">
你来自：
<select name="proyince">
    <option value="33">浙江</option>
    <option value="41">河南</option>
    <option value="32">江苏</option>
    <option value="36">江西</option>
</select>
<input type="submit" value="提交" />
</form>

<select>标签定义了一个下列列表，name属性定义了提交的参数名

<option>标签定义了一个下拉选项，option内容定义了该选项显示的文本，value属性定义了选择该选项时传递的参数值。

比如选择江苏并提交，提交参数如下：

 

多选可通过设置multiple属性来实现，Ctrl+单机并选择多个

<selectname="color"multiple><!--多重的，多样的-->
    <optionvalue="red">红色</option>
    <optionvalue="blue">绿色</option>
    <optionvalue="yellow">黄色</option>
    <optionvalue="black">黑色</option>

</select>

 

传递的参数为：

<select>标签属性定义了下拉列表框现实的选项个数，当小于实际选项个数时，会自动增加一个滚动条。

格式化的快捷键：Ctrl+alt+l

<optgroup>的lable属性定义分组显示的文字，disabled设置该分组不能用。

<select>
    <optgrouplabel="国产">
        <optionvalue="红旗">红旗</option>
        <optionvalue="byd"selected>比亚迪</option>
        <optionvalue="奇瑞">奇瑞</option>
    </optgroup>
    <optgrouplabel="德系">
        <optionvalue="bmw">宝马</option>
        <optionvalue="大众">大众</option>
    </optgroup>
    <optgrouplabel="日系车"disabled>
        <optionvalue="丰田">丰田</option>
        <optionvalue="本田">本田</option>
        <optionvalue="三菱">三菱</option>
    </optgroup>
</select>

4.14 Textarea：

自学：定义一个多行的文本输入控件

主要是为了方便用户输入较多文字信息，rows属性指定编辑区域的行数，cols属性指定编辑区域的列数。

<textarea rows="13" cols="20"> 

4.15 Fieldset：

当信息较多时，可以考虑按照信息内容进行分组，达到表达清晰的目的。Field标签提供将信息分组的一种方式，分组后每组信息默认有一个边框。同时可以使用<legend>标签为每组指定一个标题。

<form>
    <fieldset>
        <form action="reseult.html" method="get">
<fieldset>
                <legend>个人基本信息</legend>
                姓名：<input type="text" name="name"/>
                ID_Card：<input type="password" name="ID_Card"/>
                年龄：<input type="text" name="age"/></fieldset>
            <fieldset>
                <legend>个人教育背景</legend>
                毕业院校：<input type="text" name="schoolend"/>
                专业：<input type="text" name="zy"/>
            </fieldset>
        </form>

<fieldset> 标签可以将表单内的相关元素分组。

<fieldset> 标签会在相关表单元素周围绘制边框。标签将表单内容的一部分打包，生成一组相关表单的字段。

<fieldset> 标签没有必需的或唯一的属性。

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

4.16 隐藏域

<input type="hidden" name="stuNo"value="111111"readonly/><br>

当需要向服务器传递参数，且该参数无需用户输入，甚至都不想让用户看见，可以使用隐藏域来实现。

4.17 表单总结

查看Http头部

F12打开调试窗口，切换到网络页（NetWork）

5 table

5.1表格

表格的组成部分：标题/表头/主题/表尾

<table>定义一个表格

<caption>定义表格的标题

<thead>定义表头部分

<tbody>定义表格主题（数据部分）

<tfoot>定义表尾

<tr>定义一行

<th>定义一个数据项（单元格），一般用于表头，有加粗样式。

<td>的rowspan和colspan分别定义单元格跨行的行数。跨列的列数，一般用于表格主题部分，没有加粗样式