05_html表单 &框架集

表单

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>

猜你喜欢

转载自blog.csdn.net/zljcxdm/article/details/82940568