HTML5新增标签学习（笔记02）

最新推荐文章于 2019-08-20 14:34:00 发布

原创最新推荐文章于 2019-08-20 14:34:00 发布 · 438 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主-Rong姐姐好可爱原创文章，未经允许不得转载.

文章标签：

#HTML5 #HTML5新增属性 #HTML表单 #HTML笔记

前端笔记专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了HTML表单的基础概念及使用方法，包括表单域、提交方式(get与post的区别)、input标签的各种类型及其属性，并通过实例展示了不同场景的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<!--html表单：
				1.什么是表单 ？用户输入或者操作，将数据进行提交的基本单位。
				2.什么是表单域？用户可以输入或者可以操作的元素；
			form表单的中的action表示动作，常用跳转链接或者方法
			method：表示提交方式，有post和get两种
			get方式：将数据暴露（默认的提交方式）
			post方式：将请求封装在post方法中，安全一点；
			
			input标签的常用属性：
				1.type设置内容的显示方式：常用text（纯文本）、password（密码）、submit（提交数据）、rreset（重置数据）等；
				2.placeholder 设置文本框输入的提示信息，感觉像隐藏起来；
				3.value 保存用户输入或者操作的信息
			*4.name 表单域的名字，设置name的值就会提交数据；
			
			form表单的常用属性：
				1.action 设置数据提交的位置（路径）
				2.method 设置数据的交互方式，有get和post两种，
					get：直接将数据暴露在地址栏中，
						优点：速度快
						缺点：不安全，携带的数据较少，一般为8~16k
					post：不能在地址栏中看到提交的参数以及相对应的数值。
						 优点：安全，携带的数据较多
						 缺点：速度慢
		-->
		<!--两种提交方式的案例-->
		<h2>GET 提交表单的案例显示</h2>
		<form method="get">
			请输入账号:<input type="text" name="id" placeholder="请输入账号" size="10" /><br /> 请输入密码:
			<input type="password" name="password" placeholder="请输入密码" size="10" /><br />
			<input type="submit" value="登录" />  
			<input type="reset" value="重置" /></form>
		<hr width="400px" align="left" />
		<h2>POST 提交表单的案例显示</h2>
		<form method="post">
			请输入账号:<input type="text" name="id" placeholder="请输入账号" size="10" /><br /> 请输入密码:
			<input type="password" name="password" placeholder="请输入密码" size="10" /><br />
			<input type="submit" value="登录" />  
			<input type="reset" value="重置" /></form>

		<!--
        	input的常用type类型：
        		text：单行文本框
        		password：密码框
        		radio：单选按钮
        		CheckBox：复选框
        	   *hidden：隐藏域
        	   *file：文件上传
        	****checked:表示在显示的时候，被选中。checked对应的值为布尔值，true和false
        	****在单选按钮就，要想显示单选，需要添加name属性用来区分，表示n个中选择一个
        	*name属性用来在后台源码中区分选择项，可以赋值 
        -->
		<h2>input的常用type类型案例</h2> 
		当行文本框：
		<input type="text" size="4" placeholder="填写提示字符" /><br /> 
		密码框：
		<input type="password" size="4" /><br />
		单选按钮：
		<input type="radio" name="1"/>选择一 
		<input type="radio" name="1"/>选择二 
		<input type="radio" />选择三 <br />
		复选按钮：
		<input type="checkbox" checked="checked" name="1"/>选择一 
		<input type="checkbox" />选择二 
		<input type="checkbox" />选择三 
		<!--用hidden来隐藏，用来提交数据，一般用于数据传输-->
		<input type="hidden"  name="id" value="10"/><br />
		提交按钮：
		<input type="submit" value="提交" /> <br />
		重置按钮：
		<input type="reset"  value="重置"/> <br />
		自定义按钮：
		<input type="button" value="一般按钮" onclick="alert('添加自定义按钮的点击动作！')"/> <br />
		上传文件：
		<input type="file"size="20"/><br />
		
		
		
		下拉列表：
		<select size="3">
			<option>武汉</option>
			<optgroup>
				<option>武昌</option>
				<option>汉口</option>
				<option>汉阳</option>
			</optgroup>
			<option>深圳</option>
			<option>上海</option>
			<option>大理</option>
		</select>
		<br />
		<!--
        	textarea 大文本
        	textarea:多行文本
        	label:标签
        	fieldset:文件组
        	关于style的内容，在后期都可以放在css中来测试；
        -->
        
        <textarea name="msg" rows="3" cols="20" placeholder="请输入你的需要写的内容在textarea大文本中"></textarea>
		<br />
		<fieldset style="width: 400px;">
			<legend align="center">登录信息</legend>
			<label>请输入账号：</label><input /><br />
			<label>请输入密码：</label><input /><br />
		</fieldset>
		<br />
		<br />
		<!--
			required:表示文本框中必须填写字段；可简写为required；布尔类型；
			readonly:表示文本框中的内容只能读取，不可编辑，可简写为readonly；布尔类型；
			checked；表示在单选或者复选框中，默认选中，可简写问 checked；布尔类型；
		-->
		<!--必须填写-->
		<input type="text" required="required" /><font color="red">*</font><br /><br />
		<!--不能修改-->
		<input type="text" readonly="readonly" value="2237221210" /><br /><br />
		<!--默认选中-->
		<input type="checkbox" checked="checked" />同意条款<br /><br />
		<!--默认选中"选择三"-->
		<select>
			<option> 选择一</option>
			<option>选择二</option>
			<option selected="selected">选择三</option>
			<option>选择四</option>
		</select>
		<br />
		<!--
        	HTML5在基础HTML标签中新增的属性；
        	date：
        	week：
        	url：
        	color:
        	search:    
        -->
                        可选择日期：<input type="date" /><br /><br />
			可以选择周期：<input type="week" /><br /><br />
			可以填写邮箱地址：<input type="email" /><br /><br />
			可以填写网络地址，http或者https协议<input type="url" /><br /><br />
			搜索框：<input type="search" /><br />
			选择颜色：<input type="color" /><br />
		
		<!--
        	html中标签的分类：
        		I.块级标签(hx:设置字体大小 hr p table div tr)：单独占据一行；
        			1.可以设置宽和高，没有设置宽度，宽为整个网页，没有设置高度，高为内容的高度；
        			2.可以设置任意位置的margin和padding；
        			3.单独占一行，默认有换行效果；
        		II.内联标签(font i u del b span a td  input select textarea)：不会换行；
        			1.不能设置宽和高，宽是内容的宽，高是内容的高；
        			2.只能设置左和右的margin和padding；
        			3.只占据内容的实际大小，默认不换行；
        	margin：表示标签的外间距；
        	padding：标签的内间距；（margin和padding可以参考Android来理解；）
			display：设置标签的呈现方式；
				1.block：显示为块级标签；
				2.inline：显示内联标签；
				3.inline-block：既不换行，又可以设置宽和高；
       -->
	</body>

</html>