H5学习笔记（十三）表单

表单

现实生活中的表单是用来提交信息的，比如：办理银行卡填写的申请表、找工作填写的简历、入学时填写的个人信息表。这些都是表单的一种
网页中的表单是用来向服务器提交信息的，我们最常用到的表单就是baidu的搜索框在搜索框填入关键字后，点击搜索按钮，关键字会提交到baidu的服务器，服务器根据用户输入的关键字进行检索，返回相应信息
表单可以将用户填写的信息提交的服务器

 

表单的标签

使用form标签创建一个表单
form标签中必须指定一个action属性，该属性指向的是一个服务器的地址，当我们提交表单时将会提交到action属性对应的地址   

<form action="target.html">

在表单中可以使用fieldset来为表单项进行分组，可以将表单项中的同一组放到一个fieldset中

<fieldset>

在fieldset可以使用legend子标签，来指定组名

<legend>用户信息</legend>

<fieldset>
	
	<!-- 在fieldset可以使用legend子标签，来指定组名 -->
	<legend>用户信息</legend>
	
	
	<!-- 
		使用input来创建一个文本框，它的type属性是text
			如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性
			name表示提交内容的名字	
			
		用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
			url地址?查询字符串
		格式：
			属性名=属性值&属性名=属性值&属性名=属性值&属性名=属性值
		在文本框中也可以指定value属性值，该值将会作为文本框的默认值显示	
	-->
	<!-- 
		在html中还为我们提供了一个标签，专门用来选中表单中的提示文字的
		label标签
		该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值
	-->
	<label for="um">用户名</label>
	<input id="um" type="text" name="username"  /> <br /><br />
	
	<!--
		密码框
			- 使用input创建一个密码框，它的type属性值是password
	-->
	<label for="pwd">密码 </label>
	<input id="pwd" type="password" name="password" /> <br /><br />
</fieldset>

<fieldset >
	
	<legend>用户爱好</legend>

<!--
	单选按钮
		- 使用input来创建一个单选按钮，它的type属性使用radio
		- 单选按钮通过name属性进行分组，name属性相同是一组按钮
		- 像这种需要用户选择但是不需要用户直接填写内容的表单项，
			还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
			
		如果希望在单选按钮或者是多选框中指定默认选中的选项，
			则可以在希望选中的项中添加checked="checked"属性
-->
性别  <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
	<input type="radio" name="gender" value="female" checked="checked" id="female" /><label for="female">女</label> 
	<br /><br />

<!-- 
	多选框
		- 使用input创建一个多选框，它的type属性使用checkbox
-->
爱好 	<input type="checkbox" name="hobby" value="zq" />足球
	<input type="checkbox" name="hobby" value="lq" />篮球
	<input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球
	<input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球
<br /><br />

</fieldset>

<!-- 
	下拉列表
		- 使用select来创建一个下拉列表
		下拉列表的name属性需要指定给select，而value属性需要指定给option
		可以通过在option中添加selected="selected"来将选项设置为默认选中
		
		当为select添加一个multiple="multiple"，则下拉列表变为一个多选的下拉列表
-->
你喜欢的明星 
	<select name="star">
		
		<!-- 
			在select中可以使用optgroup对选项进行分组
				同一个optgroup中的选项是一组
			可以通过label属性来指定分组的名字	
		-->
		<optgroup label="女明星">
			<!-- 在下拉列表中使用option标签来创建一个一个列表项 -->
			<option value="fbb">范冰冰</option>
			<option value="lxr">林心如</option>
			<option value="zw">赵薇</option>
		</optgroup>
		
		<optgroup label="男明星">
			<option value="zbs" selected="selected">赵本山</option>
			<option value="ldh">刘德华</option>
			<option value="pcj">潘长江</option>
		</optgroup>
		
	</select>

<br /><br />

<!--
	使用textarea创建一个文本域
-->
自我介绍  <textarea name="info"></textarea>

<br /><br />

<!-- 
	提交按钮可以将表单中的信息提交给服务器
	使用input创建一个提交按钮,它的type属性值是submit
	在提交按钮中可以通过value属性来指定按钮上的文字
-->
<input type="submit" value="注册" />

<!--
	<input type="reset" />可以创建一个重置按钮，
		点击重置按钮以后表单中内容将会恢复为默认值
-->
<input type="reset" />

<!-- 
	使用input type=button可以用来创建一个单纯的按钮，
		这个按钮没有任何功能，只能被点击
-->
<input type="button" value="按钮" />

<!--
	除了使用input，也可以使用button标签来创建按钮
	这种方式和使用input类似，只不过由于它是成对出现的标签
		使用起来更加的灵活
-->
<br /><br />
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>

框架集

框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面，框架集可以同时引入多个页面，而内联框架只能引入一个， 在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>

 

图片

在IE6中对图片格式png24支持度不高，如果使用的图片格式是png24，则会导致透明效果无法正常显示
        解决方法：
            1.可以使用png8来代替png24，即可解决问题，
                但是使用png8代替png24以后，图片的清晰图会有所下降
                
            2.使用JavaScript来解决该问题，需要向页面中引入一个外部的JavaScript文件
                然后在写一下简单的JS代码，来处理该问题

<body style="background-color: #bfa;">
	<div class="box1"></div>
	<div class="box2"></div>
	<img src="img/3.png"/>
	
	<!-- 在body标签的最后引入外部的JS文件 -->
	<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
	<!--再创建一个新的script标签，并且编写一些js代码 -->
	<script type="text/javascript">
		DD_belatedPNG.fix("*");
	</script>
</body>

一些代码只需要在某个特定的浏览器执行，其他的不需要执行，这里可以使用css Hack解决该问题,ie10以下支持

<!--[if IE]>
<p>远离IE6<p>
<![endif]-->

<!--[if IE 6]>
<p>远离IE6<p>
<![endif]-->

<!--[if lt IE 9]>  小于ie9/gt表示大于/lte小于等于
<p>远离IE6<p>
<![endif]-->

<body style="background-color: #bfa;">
	<div class="box1"></div>
	<div class="box2"></div>
	<img src="img/3.png"/>
	
        <!--[if IE 6]>
	    <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
	    <script type="text/javascript">DD_belatedPNG.fix("*");</script>
        <![endif]-->
</body>

为了兼容ie6多写一个样式专门给ie6使用，可以引入样式，添加   <!--[if IE 6]><![endif]-->