HTMLDay03

最新推荐文章于 2024-09-18 09:47:26 发布

肖帆咪

最新推荐文章于 2024-09-18 09:47:26 发布

阅读量128

点赞数 1

分类专栏： HTML 文章标签： html html5

本文链接：https://blog.csdn.net/XiaoFanMi/article/details/109246149

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

表单的创建

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!-- 
			表单标签form
			有若干输入选择组件,用于用户填写后,提交至服务器
			在form标签的属性:
				action="服务器地址" method="提交方式 post/get"
		 -->
		<form>
			
			<!-- 
				<input type="text">  单行文本输入框
				placeholder="请输入账号" 在文本框中提示,输入内容后被覆盖
				readonly="readonly" 只读,但可提交
				disabled="disabled" 禁用,不可提交
				id:为标签定义id号,唯一不可重复.,自定义
					<lable for="id">账号</lable>  为id定义标签,通过点击可以选中对应的输入框
				size:文本框的列数
				value:向服务器提交的值
				name:可重复,自定义
			 -->
			<label for="账户">账号:</label>
			<input type="text" id="账户"  placeholder="请输入账号" value=""/><br/>
            
			<label for="邮箱">邮箱:</label>
			<input type="email" id="邮箱"  placeholder="请输入邮箱" disabled="disabled"/><br/>
            
			<label for="密码">密码:</label>
			<input type="password" id="密码" placeholder="请输入密码" readonly="readonly"/><br/>
			
			
			
			<!-- 
				单选框:type="radio"
				复选框:type="checkbox"
				
				相同点:
					通过name实现分组,name相同的为一组
					凡选择性组件必须基于默认值  eg:value="男"
					默认选中:checked="checked"
					
				不同点:
					单选框只能选一个,组内相互排斥
					复选框可多选
			 -->
			 <!-- 单选框  男||女  默认选项:男-->
			 性别:
			 <input type="radio" value="男" name="sex" id="男" checked="checked"/>
			 <label for="男">男</label>
			 <input type="radio" value="女" name="sex" id="女"/>
			 <label for="女">女</label><br />
			
			擅长语言:
			<!-- 
				复选框   Java || C || html
				默认选项checked="checked"
			-->
			<input type="checkbox" value="Java" 
                   name="course" id="Java" checked="checked"/>
			<label for="Java">Java</label>
            
			<input type="checkbox" value="C" 
                   name="course" id="C" checked="checked"/>
			<label for="C">C</label>
            
			<input type="checkbox" value="html" 
                   name="course" id="html" checked="checked"/>
			<label for="html">html</label>
            
            
            <!-- 
				select 下拉框
				name属性写在select中
				option为选项中的内容
				提交后option中的value会与selecname结合提交至服务器
				selected="selected"默认选择
			 -->
			省份:
			<select name="prinvince">
				<option value="101">北京</option>
				<option value="102">天津</option>
				<option value="103" selected="selected">河北</option>
				<option value="104">武汉</option>
			</select><br />



			<!-- 
				type="file"上传文件
				accept=".文件格式"限制文件格式
			 -->
			附件:
			<input type="file" accept=".png" /><br />
            
            
			<!-- 
				多行文本域textare
				rows="number"行数
				cols="number"列数
			 -->
			详细地址:
			<textarea rows="3">
				 陕西省西安市
			 </textarea><br />


			<!--  
				type="reset"重置按钮,还原网页初始状态
				type="submit"提交按钮,触发表单提交动作
				type="button"普通按钮,触发事件,调用js函数
			-->
			<input type="reset" value="再来一遍" />
			<input type="submit" value="那就这样吧" />
			<input type="button" value="简简单单才是真" /><br />


			
		</form>
	</body>
</html>

内联框架

	<!-- 
	内联框架<iframe src="嵌套窗口"></iframe>
	在窗口中嵌套另一个窗口,从而在窗口中引出另一个窗口
					
	创建的子窗口中定义name="子窗口"，
	通过超链接target="子窗口"，使其打开方式为在子窗口打开
	-->
	父网页
	<a href="http://www.baidu.com" target="z1">百度</a>
	<iframe src="http://www.qq.com" name="z1" frameborder="1"></iframe>

总结

表单：

1.创建表单<form></form>
属性有:action=“服务器名” method=“post/get”

2.<input type="text"/>单行文本输入框
type类型有多种
单选框:type=“radio”
复选框:type=“checkbox”
3.placeholder=“在输入框中显示的内容” 在用户输入内容后会被覆盖
4.readonly="readonly"只读,可以提交
5.disabled="disabled"禁用,且不可提交
6.id:为标签自定义id号,唯一不可重复
7.<label for="id号">账号:</label> 配合id使用,通过点击账户两个字对输入框进行输入
8.size=“number” 文本框的列数
9.value:向服务器提交的值
10.name可重复,自定义,为标签定义别名
11.<select name=""></select>下拉框
12.<option value=""></option>下拉框中的选项,提交后option中的value会与select中的name结合提交至服务器
13.selected="selected"默认选择
14.type="file"上传文件
accept="文件名.文件格式"限制上传文件的格式
15.<textarea></textarea>多行文本域
rows=“number” 设置列数
cols="number"设置行数
16.type="reset"重置按钮,还原网页初始状态
type="submit"提交按钮,触发表单提交动作
type="button"普通按钮,触发事件,调用js函数