HTML下拉列表textarea 分组 隐藏域

xiaoxiao2021-02-28  65

下拉列表

.下拉列表的好处:

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>rowspancolspan分别定义单元格跨行的行数。跨列的列数,一般用于表格主题部分,没有加粗样式

转载请注明原文地址: https://www.6miu.com/read-40582.html

最新回复(0)