表单
form:创建一个表单必须指定action属性【指向服务器地址】
fieldset:对表单进行分组
|- 使用legend子标签,来指定组名
label:专门用来表示表单中的提示文字
该标签可以指定一个for属性,该属性的值需要指定一个表单项的id值
<label for="[表单项的id值]">用户名</label>
文本框:
<input type="text" value="" name=""/>
使用input来创建一个文本框,它的type属性是text
name属性:表单项中的数据提交到服务器时,提交内容的名字
单选按钮:
<input type="radio" name="sex" value="male" id="male" />
使用input来创建一个单选按钮,它的type属性使用radio
name属性:通过name属性进行分组,name属性相同是一组按钮
value属性:【必须指定】被选中的表单项的value属性值将会最终提交给服务器
checked属性:指定默认选中的选项。checked="checked"
多选框:
使用input创建一个多选框,它的type属性使用checkbox
提交按钮:
使用input创建一个提交按钮,它的type属性值是submit
<input type="submit" value="注册" />
提交按钮可以将表单中的信息提交给服务器,
value属性:指定按钮上的文字
重置按钮:
<input type="reset" value="重置" />
点击重置按钮以后表单中内容将会恢复为默认值
普通按钮:
<input type="button" value="按钮" />
使用input type=button可以用来创建一个单纯的按钮,
这个按钮没有任何功能,只能被点击
除了使用input,也可以使用button标签来创建按钮
这种方式和使用input类似,只不过由于它是成对出现的标签
使用起来更加的灵活
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
下拉列表
使用select来创建一个下拉列表
<select name="">
<option value=""></option>
</select>
下拉列表的name属性需要指定给select,
而value属性需要指定给option
可以通过在option中添加selected="selected"来将选项设置为默认选中
当为select添加一个multiple="multiple",则下拉列表变为一个多选的下拉列表
/* multiple ['mʌltɪpl] adj. 多重的;多样的;许多的 */
在select中可以使用optgroup对选项进行分组
同一个optgroup中的选项是一组
可以通过label属性来指定分组的名字
文本域:
使用textarea创建一个文本域
自我介绍 <textarea name="info"></textarea>
用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
url地址?查询字符串
格式:
属性名=属性值&属性名=属性值&属性名=属性值&属性名=属性值
在文本框中也可以指定value属性值,该值将会作为文本框的默认值显示
<form action="./new_file.html" method="get">
<fieldset id="fieldset1">
<legend>用户信息</legend>
<label for="username">用户名:</label>
<!-- 文本框 -->
<input type="text" id="username" name="username" value="" /><br>
<label for="psw">密 码:</label>
<input type="text" id="psw" value="" /><br>
<!-- 单选按钮 -->
<span>性别:</span>
<input type="radio" name="sex" id="male" value="male" checked="checked"/>
<label for="male">女</label>
<input type="radio" name="sex" id="female" value="female" />
<label for="female">男</label><br>
<!-- 多选框 -->
<span>爱好:</span>
<input type="checkbox" name="hobby" value="ks" />看书
<input type="checkbox" name="hobby" value="sj" checked="checked"/>睡觉
<input type="checkbox" name="hobby" value="xdm" />写代码
<input type="checkbox" name="hobby" value="lq" />篮球<br>
<!-- 下拉列表 -->
<label for="mx">请选择最喜欢的明星:</label><br>
<select name="star" id="mx">
<optgroup label="男明星">
<option value ="ldh">刘德华</option>
<option value ="zwj">张卫健</option>
<option value ="cl">成龙</option>
</optgroup>
<optgroup label="女明星">
<option value ="lxr1" selected="selected">林心如1</option>
<option value ="lxr2">林心如2</option>
<option value ="lxr3">林心如3</option>
</optgroup>
</select><br>
<textarea >
自我介绍
</textarea><br>
</fieldset>
<input type="submit" name="submit" value="注册" />
<input type="reset" value="重置" /><br>
<button type="button">按钮</button>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
框架集
框架集和内联框架的作用类似,都是用于在一个页面中引入其他的外部的页面,
框架集可以同时引入多个页面,而内联框架只能引入一个,
在h5标准中,推荐使用框架集,而不使用内联框架
使用frameset来创建一个框架集,注意frameset不能和body出现在同一个页面中
所以要使用框架集,页面中就不可以使用body标签
属性:
rows,指定框架集中的所有的框架,一行一行的排列
cols, 指定框架集中的所有的页面,一列一列的排列
这两个属性frameset必须选择一个,并且需要在属性中指定每一部分所占的大小
frameset中也可以再嵌套frameset
frameset和iframe一样,它里边的内容都不会被搜索引擎所检索,
所以如果搜索引擎检索到的页面是一个框架页的话,它是不能去判断里边的内容的
使用框架集则意味着页面中不能有自己的内容,只能引入其他的页面,而我们每单独加载一个页面
浏览器都需要重新发送一次请求,引入几个页面就需要发送几次请求,用户的体验比较差
如果非得用建议使用frameset而不使用iframe
<frameset cols="30% , * , 30%">
<!--
在frameset中使用frame子标签来指定要引入的页面
引入几个页面就写几个frame
-->
<frame src="01.表格.html" />
<frame src="02.表格.html" />
<!-- 嵌套一个frameset -->
<frameset rows="30%,50%,*">
<frame src="04.表格的布局.html" />
<frame src="05.完善clearfix.html" />
<frame src="06.表单.html" />
</frameset>
</frameset>