html-css基础

最新推荐文章于 2024-03-27 15:54:03 发布

wwetarena

最新推荐文章于 2024-03-27 15:54:03 发布

阅读量328

点赞数

分类专栏： html基础文章标签： css html

本文链接：https://blog.csdn.net/wwetarena/article/details/119671301

版权

html基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这篇博客介绍了HTML中的表单元素及其用途，包括文本输入框、密码输入框、列表选择、复选框和详细信息展示。重点讲解了`<form>`、`<input>`、`<datalist>`、`<checkbox>`和`<details>`标签的用法，以及样式设置和用户交互。同时，还涉及到数据提交、验证和用户界面设计。

摘要由CSDN通过智能技术生成

表单

服务器/网站用来收集个人用户信息的工具

<form>
			<input 
				type="text" 
				name="uname" 
				id="uname" 
				placeholder="昵称"
				maxlength="6" 
				readonly="readonly" />
			
		</form>

上面的代码是一个简单表单里面只包含了一个文本输入框

form就是表单标签,通过里面子标签来收集用户的数据信息,将来通过接口提交对应的服务器.如果没有写,默认将数据提交到当前页面.
form标签的子标签有:
input元素
根据属性type的取值不同,分为
type取值为 text,就是当前案例中的文本输入框.特点:输入的内容明文显示.
其它属性:
name 属性的取值来自于实际需求中的数据库中对应列名(即使不同,也会有相应的对应关系),只有有name属性的表单元素才会提交数据到服务器
id 属性页面元素的唯一标识,通过id的属性值可以找到当前的输入框.
placeholder属性提示用户输入的信息
maxlength 属性限制用户输入的数据的大小,因为表单也不能发送大量数据,用户提交数据过多,会造成服务器的压力太大.
readonly 设置控件只读,当前的文本输入框不能使用

<input type="password" 
					name="upwd" id="upwd" 
					placeholder="密码"
					maxlength="6" />

type取值为password是密码输入框特点是输入内容不明文显示,但是如果是默认提交请求方式会出现密码显示在地址栏,这样是不安全的,所有提交请求的方式不能未使用默认方式.

<style>
			#uname,#upwd{
				width: 300px;
				height: 40px;
				border-color: blue;
				border-radius: 10px;
				background-color: pink;
			}
			/*伪类 文本输入框被选中的样式*/
			#uname:focus{
				border-color: red;
			}
			/*密码输入框的样式*/
			#upwd:focus{
				border-color: purple;
			}
		</style>

上面是两个输入框的样式文件,使用的是内部样式表.通过id选择器来定义样式,当两个元素要使用同一样式时,可以使用复杂的选择器.

<input type="text" name="qh" 
				id="qh"	 list="qhlist" /> 
				<datalist id="qhlist">
					<option  value="+86"/>
					<option  value="+852"/>
					<option  value="+853"/>
					<option  value="+886"/>
</datalist>

上面是文本输入框的取值的另外一种方法,从特定的列表选取值,input元素添加list属性,list属性的取值等于datalist的id属性值,这样input元素就和datalist产生了一个绑定关系.datalist标签是由一组一组的option标签组成 option的意思是选项 datalist的意思是数据列表.datalist是不会在页面显示的

<input type="checkbox" name="xy" id="xy" 
		    	value="1"  />
		    	<label for="xy">
		    		<span class="zy">
		    			我已阅读并同意相关服务条款和隐私政策  
		    		</span>
</label>

type取值为CheckBox是复选框
label标签可以通过for属性和复选框的选项的id值绑定产生一种点击label标签的内容等价于选中复选框的图标

<details>
		    		<summary>约定</summary>
		    		<p>
		    			<a href="#">QQ号码规则</a><br />
		    			<a href="#">隐私政策</a><br />
		    			<a href="#">空间政策</a>
		    		</p>
</details>

details 详情里面包含summary 主题标签p标签段落标签,展开的详情的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>qq</title>
		<style>
			#uname,#upwd{
				width: 300px;
				height: 40px;
				border-color: blue;
				border-radius: 10px;
				background-color: pink;
			    
			}
			#uname:focus{
				border-color: red;
			}
			#upwd:focus{
				border-color: purple;
			}
			/*使用类属性的值去定义样式,定义的
			 样式可能会匹配到多个标签*/
			.qh{
				width: 100px;
				height: 40px;
				border-color: blue;
				border-radius: 10px;
				background-color: pink;
			}
			#phone{
				width: 186px;
				height: 40px;
				border-color: blue;
				border-radius: 10px;
				background-color: pink;
			}
			#yzm{
				width: 186px;
				height: 40px;
				border-color: blue;
				border-radius: 10px;
				background-color: blue;
				color: white;
			}
			#zc{
				width: 300px;
				height: 40px;
				border-color: blue;
				border-radius: 10px;
				background-color: blue;
				color: #FFFFFF;
			}
			.zy{
				font-size: 8px;
				color: gray;
			}
			details{
				font-size: 8px;
			}
		</style>
	</head>
	<body>
		<h2>欢迎注册QQ</h2>
		<span>每一天,乐在沟通.</span>
		&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;
		&ensp;&ensp;&ensp;
		<span>
			<a href="#"
				style="text-decoration: none;">
				免费靓号</a>
		</span>
		<br />
		<br />
		<br />
		<form>
			<input 
				type="text" 
				name="uname" 
				id="uname" 
				placeholder="昵称"
				maxlength="6" 
				 />
				 <br />
				 <br />
				<input type="password" 
					name="upwd" id="upwd" 
					placeholder="密码"
					maxlength="6" /> 
				<br />
				 <br /> 
				<input type="text" name="qh" 
				class="qh"	 list="qhlist" /> 
				<datalist id="qhlist">
					<option  value="+86"/>
					<option  value="+852"/>
					<option  value="+853"/>
					<option  value="+886"/>
				</datalist>
		        <input type="text" name="phone"
		        	 id="phone"
		        	 placeholder="电话号码" />
		        	 <br />
		    <br />
		    <input type="text" name="qh" 
				class="qh"	 placeholder="短信验证码" /> 
		     <input type="button" name="yzm"
		        	 id="yzm"
		        	 value="发送验证码" />
		    <br />
		    <br />
		    <input id="zc" type="submit" 
		    	value="立即注册" />
		    <br />
		    <br />
		    <input type="checkbox" name="xy" id="xy" 
		    	value="1"  />
		    	<label for="xy">
		    		<span class="zy">
		    			我已阅读并同意相关服务条款和隐私政策  
		    		</span>
		    	</label>
		    	<details>
		    		<summary>约定</summary>
		    		<p>
		    			<a href="#">QQ号码规则</a><br />
		    			<a href="#">隐私政策</a><br />
		    			<a href="#">空间政策</a>
		    		</p>
		    	</details>
		</form>
	</body>
</html>

wwetarena

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html-css基础

表单服务器/网站用来收集个人用户信息的工具<form> <input type="text" name="uname" id="uname" placeholder="昵称" maxlength="6" readonly="readonly" /> </form>上面的代码是一个简单表单里面只包含了一个文本输入框form就是表单标签,通过里面子标签来收集用户的数据信息,将来通过接口提交
复制链接

扫一扫

专栏目录