文件选择框是什么?
选择你的头像:<inputtype="file"accept="application/image/*">
选择你的头像:<inputtype="file" accept="application/image/jpeg">
简历:<inputtype="file" accept="application/pdf/’’>
Accept:属性的好处是定制文件的选放类型
假如选择的文件是需要上传的话需要在对应的表单属性;列如:
<form enctype="multipart/form-data">
用户使用方便;操作简单;
是页面更加整洁;
更让用户规范输入和统一性;
列如:
<formaction="zzzzzzz.html" method="get">
你来自何方:
<select name="province">
<option value="33">浙江</option>
<option value="41">河南</option>
<option value="32">江苏</option>
<option value="36">江西</option>
</select>
<input type="submit" value="提交"/>
</form>
标签属性:
<select>标签定义了一个下拉列表
<option>标签定义了一个下拉列表的一个选项
<select>标签定义了name属性定义了提交参数的名字
<option>标签的内容定义了该选项显示的文本,
value属性定义了选中该选项选项时传递的参数值
多选可通过设置multiple来实现,ctrl+单机可选择多个;
Multiple可以代替checkbox更方便更整洁;
<select>标签的size属性定义了下了列表显示框的选择个数,当小于选项个数时,会自动增加一个滚动条;
格式化快捷键:ctrl+Alt+L
选择默认selected
<option value="41"selected>河南</option>
分组总结:
你打算购买小汽车品牌:
<select>
<optgroup label="国产">
<option value="红旗">红旗</option>
<optionvalue="BYD">BYD</option>
<option value="奇瑞">奇瑞</option>
<option value="benz">奔驰</option>
</optgroup>
<optgroup label="日产" disabled>
<optionvalue="dazong">大众</option>
<option value="feb">丰田</option>
</optgroup>
<optgroup label="名牌">
<option value="MZ">玛莎拉蒂</option>
<option value="LandRover">路虎</option>
</optgroup>
</select>
Optgroup 的label属性定义分组显示文字,disabled设置该分组
Textarea的两种属性:
Readonly 只读
Disabled 禁用
<textarea> 标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和width 属性。
注释:在文本输入区内的文本行间,用 "%OD%OA" (回车/换行)进行分隔。
提示:可以通过 <textarea> 标签的 wrap 属性设置文本输入区内的换行模式。有关 wrap属性的详细信息。
<form action=""method="get">
学习经历:
<textarea rows="2"cols="30"></textarea>
column
</form>
Fieldset属性
当信息内容较多时可以按照内容进行分组,能够表达清晰的目的;
Fieldset标签提供将信息分组的形式,分组默认有一个边框。
fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。<legend>标签作要是文本的标题
列如:
<form action="zzzzzzz.html"method="get">
<fieldset>
<legend>个人基本信息</legend>
姓名:<input type="text"name="name">
<br>
性别:<input type="text"name="sex">
<br>
年龄:<input type="text"name="age">
</fieldset>
<fieldset>
<legend>个人经历</legend>
专业:<input type="text"name="career">
<br>
姓名:<input type="text"name="name">
<br>
性别:<input type="text"name="sex">
</fieldset>
<fieldset>
<legend>学习经历</legend>
年龄:<input type="text"name="age">
<br>
姓名:<input type="text"name="name">
<br>
性别:<input type="text"name="sex">
</fieldset>
</form>
隐藏区域
就是向服务器传递 参数,无需登录,用户也看不见实现了隐藏域!
<title>隐藏域的使用</title>
</head>
<body>
<form action="result.html"method="get">
学 号:<inputtype="hidden"name="stuNO"value="007">
<br>
原密码:<input type="password"name="old">
<br>
新密码:<input type="password"name="new">
<br>
<input type="submit"value="修改密码">
</form>
200 出现表示跳转成功,成功处理请求!
http头部F12打开调试窗口,切换到网页(network)
提供了四种数据
Genral
Response Headers
Request Headers
Form Data表格
<table>定义一个表格
<caption>定义表格的标题
<theah>定义表头部分
<tfoot>定义表尾,一般显示汇总信息
<tr>定义一列<th>定义一个数据项(单元格)
<td>一般用于表头,有加粗样式<td>一般用于表格主体部分,没有加粗样式
<td>的rowspan和colspan分别定义单元格跨行的行数,跨列的列数
table 布局
布局:结构清晰页面美观;是一个页面的整体结构;
结构特点:从左往右,从上到下,每行高度一致;