欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

html续2

程序员文章站 2022-06-23 08:22:44
HTML概述表单form标签:表单网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器
action:提交后,由服务器上的那个处理程序处理,action=“URL”method:指定向服务器提交的方法一般为psot或get方法,psot方法比较安全,mothod=“post或get”表单属性及代码实现<...

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>

本文地址:https://blog.csdn.net/xiaozhuqiaozhi10/article/details/109257688