HTML概述

表单

form标签:表单

网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器

<form action=“http://www.sohu.com”method=“post”></form>

action:提交后,由服务器上的那个处理程序处理,action=“URL”

method:指定向服务器提交的方法一般为psot或get方法,psot方法比较安全,mothod=“post或get”

表单属性及代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 表单提供了很多的输入或选择的组件
		 用户可输入信息
		 最终提交信息到服务器
		 action=""服务器地址
		 method="  post或get"指定向服务器提交的方法
		 form表单标签
		 id为标签定义id号 不能重复
		 name的值自定义,可重复,是向服务器提交数据的键
		 size设置文本区宽度
		 value向服务器提交的值
		 placeholder="请输入账号" 表单中无数据时填充数据
		 readonly="readonly" 内容只读 但是可以提交
		 disabled="disabled"  内容变灰,不能操作
		 type="radio"单选框组件
		 通过name属性分组
		 name相同为一组,一组之内只能选中一个
		 凡是选择性组件必须给予默认值 checked="checked"
		 type="checkbox"复选框
		 type="file" 文件选择框,accept选择文件的类型
		 select为选择标签,name应该添加在该标签里 默认值为selected="selected"
		 textarea为多行文本域,rows行数,cols列数

		 -->
		<form action="" method="">
			<label for="qwer">账号:</label>
			<input type="text" name="qwerty" id="qwer" value="" placeholder="请输入账号" size="100" readonly="readonly" disabled="disabled"/><br>
			<label for="qwe">密码:</label>
			<input type="password" name="qwerty" id="qwe" placeholder="请输入密码" size="100"/>
			<br>
			性别:
			<input type="radio" name="sex" id="nan" value="男"  checked="checked"/>
			<label for="nan">男</label>
			<input type="radio" name="sex"  id="nv" value="女" />
			<label for="nv">女</label><br>
			项目:
			<input type="checkbox" name="yuyan" id="ad1" value="java"  checked="checked"/>
			<label for="ad1">java</label>
			<input type="checkbox" name="yuyan" id="ad2" value="html" />
			<label for="ad2">html</label>
			<input type="checkbox" name="yuyan" id="ad3" value="c++" />
			<label for="ad3">c++</label><br />
			文件:
			<input type="file" name="file"  accept=".jpg,.png" /><br>
			省份:
			<select name="province">
				<option value ="101">北京</option>
				<option value ="102" selected="selected">陕西</option>
				<option value ="103">上海</option>
			</select><br>
			地址:
			<textarea rows="5" cols="10">
				
			</textarea><br />
			
			<input type="reset" value="重置" />
			<input type="submit" value="注册" />
			<input type="button" value="按钮" />
		</form>
	</body>
</html>

内联框架

内联框架可以在一个窗口内嵌入一个子窗口,从而在子窗口中引入一个外部的页面

<iframe      src=#          name=#        width=#          height=#  frameborder=#> ... </iframe>

src为初始页面的url,name为框架名称,width为框架宽度,height为高度,frameborder为框架的边框宽度.

父框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
		<a href="http://www.qq.com">腾讯</a>
		<iframe src="childs.html" width="400" height="200"></iframe>
		<!-- <iframe src="childs.html" frameborder="0" width="400" height="200" ></iframe> -->
		
	</body>
</html>

子框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		子框架
		<iframe src="孙.html" width="400" height="200"></iframe>
		<a href="http://www.baidu.com" target="_parent">百度</a>
		<a href="http://www.qq.com" target="_top">腾讯</a>
	</body>
</html>

孙框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		孙框架
		<a href="http://www.baidu.com" target="_parent">百度</a>
		<a href="http://www.qq.com" target="_top">腾讯</a>
	</body>
</html>