css构造表单

最新推荐文章于 2021-08-04 09:49:57 发布
最新推荐文章于 2021-08-04 09:49:57 发布
阅读量177 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanjin1988/article/details/42776415
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>css构造表单</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			label
			{
				display:block;
			}
		</style>
	</head>
	
	<body>
		<!-- label标签的使用 -->
		<form>
			<label for = "username">用户名：<input type = "text" id = "username" name = "username" /></label>
			性别:<label for = "sex1"><input type = "radio" value = "男" id = "sex1" name = "sex" />男</label>
				 <label for = "sex2"><input type = "radio" value = "女" id = "sex2" name = "sex" />女</label>
			
		</form>
	</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>css构造表单</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			body
			{
				
			}
			
			input,textarea
			{
				border:3px double black;
			}
			
		</style>
	</head>
	
	<body>
		<form>
			<!-- 给文本框添加漂亮边框 -->
			
			<input type = "text" /> 
			<textarea cols = "20" rows = "9">
			
			</textarea>
		</form>
	</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>css构造表单</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			body
			{
				
			}
			
			select option.a
			{
				background:green;
			}
			select option.b
			{
				background:red;
			}
			select option.c
			{
				background:blue;
			}
			
		</style>
	</head>
	
	<body>
		<form>
			<!-- 给下拉菜单设置背景 -->
			<select>
				<option class = "a">上海</option>
				<option class = "b">盐城</option>
				<option class = "c">北京</option>
			</select>
			
		</form>
	</body>
</html>


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>css构造表单</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			body
			{
				
			}
			textarea
			{
				width:300px;
				height:150px;
				
				
				scrollbar-face-color:#333;
				scrollbar-highlight-color:#666;
				scrollbar-shadow-color:red;
				scrollbar-3dlight-color:#999   
				scrollbar-arrow-color:#999;      
				scrollbar-track-color:#999;
				scrollbar-darkshadow-color:#000;
			 

			}
			
		</style>
	</head>
	
	<body>
		<form>
			<!-- 给文本区设置滚动条 -->
			<textarea>
			
			</textarea>
			
		</form>
	</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>css构造表单</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			fieldset
			{
				margin:20px;
				padding:10px;
				
			}
			legend
			{
				background-color:#ddd;
				padding:5px;
				border-width:1px;
				border-style:solid;
				border-color:#fff #aaa #666 #fff;
			}
			
		</style>
	</head>
	
	<body>
		<form>
			<!-- 表单外边框设置fieldset legend -->
			<fieldset>
				<legend>登录信息</legend>
			</fieldset>
			
		</form>
	</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>css构造表单</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			label
			{
				background:yellow;
				<!-- 测试无效，待以后解决 -->
				width:120px; 
				text-align:right;
				float:left;
			} 
			
		</style>
	</head>
	
	<body>
		<!-- 结构化布局表单 -->
		<form id = "regForm">
			<fieldset>
				<legend>登录信息</legend>
				<div class = "dataArea frist"> 
					<label for = "username">用户名:</label><input type = "text" id = "username" class = "input" />
				</div>
				
				<div class = "dataArea">
					<label for = "password">密码:</label><input type = "password" id = "password" class = "input" />
				</div>
				
				<div class = "dataArea">
					<label for = "passwordVerify">确认密码:</label><input type = "password" id = "passwordVerify" class = "input" />
				</div>
			</fieldset>
			
			<fieldset>
				<legend>个人信息</legend>
				<div class = "dataArea frist">
					<label for = "nickname">昵称:</label><input type = "text" id = "nickname" class = "input" />
				</div>
				
				<div class = "dataArea">
					<label for = "email" class = "hint">电子邮件:</label><input type = "text" id = "email" class = "input" />
				</div>
				
				<div class = "subArea">
					<input type = "submit" value = "注册" class = "input" />
					<input type = "button" value = "返回" class = "input" />
				</div>
			</fieldset>
		</form>
	</body>
</html>


 

 

「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 清除表单样式,css form表单样式清除
weixin_39935092的博客
08-03 929
开发项目中表单常用的清楚样式：1、改变placeholder默认字体颜色::-webkit-input-placeholder{color: #333;}:-moz-placeholder{color: #333;}:-moz-placeholder{color: #333;}:-ms-input-placeholder{color: #333;}2、取消input number的上下箭头inpu...
bootstrap表单构造器
11-20
表单构建器则为用户提供了图形化的界面，通过拖放方式来构造表单，减少了手动编写HTML代码的工作量。 表单构建器的核心功能包括： 1. **可视化编辑**：用户可以通过直观的界面，选择不同的表单元素（如输入框、...
CSS样式和表单提交学习
girl_Xiaomin的博客
03-16 575
一周一回顾，分享一周中学习到的新知识点和难题解决方案 1.一些好用但是之前不知道的CSS样式 （1）修改input标签的placeholder样式 <input type="text" placeholder="请输入内容..."> input::-webkit-input-placeholder { color: cornflowerblue; font...
HTML+CSS基础知识简单版
TonyOliver的博客
11-07 952
HTML+CSS基础知识简单版 一、HTML概述 HTML：超文本标记语言，其实就是用来开发网页的一门语言； CSS：层叠样式表，可以用于渲染网页、美化网页、做网页。 1. HTML介绍 HTML：超文本标记语言 超文本：超过文本、超级文本； HTML不仅可以包含文本，还可以包含图片、音频、视频等各种格式的文件； 标记：标签、元素，指的是用尖括号括起来的一组内容，例如：<div>,<img>,<h1>,</h1>,</div>等。 其实就是用
级联样式表CSS
weixin_52233021的博客
12-15 172
样式的引入方式： 1、行内样式，需要使用style属性 <!--直接写在标签上 如果页面中有个标签，使用了相同的属性，后期的维护的时候需要进行统一修改的话就不利于后期维护 --> <p style="color:red;">改变颜色</p> 2、内联样式 <!-- 在当前HTML页面中使用style标签统一管理样式 --> <style> div{ color:red; } p{ color:blue; font-size: 20p
css实现男女性别选择单选框自定义选中与否背景色样式
huakaiwuxing的博客
04-01 4697
input[type=radio] { margin-right: 5px; cursor: pointer; font-size: 14px; width: 15px; height: 12px; position: relative; top: 15px; left: 15px; } input[type=radio]:af...
HTML中的单选按钮实现男女性别选择
.net专栏
05-10 10万+
 HTML中的单选按钮实现男女性别选择，不让男女同是都能都能选择，实现方法：在按钮的属性里写一个name属性，并且把name的值设置成相同的例：男女
HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站
05-21
本书“HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站”由陈婉凌编著，由清华大学出版社于2015年1月出版，全书共340页，提供了完整的PDF电子版，并带有书签和目录，方便读者查阅。 HTML5作为新一代的超文本标记...
js css 的文档
06-29
JavaScript 和 CSS 的结合使用，能够实现诸如表单验证、动态效果、数据绑定、路由控制等多种功能，为网页带来丰富多样的用户体验。在实际项目中，了解并熟练掌握这两门技术是每个前端开发者必备的基础。
JS+HTML版表单构造器(Fom Builder)适合Web系统使用
06-21
**Bootstrap表单构造器_files**可能是一个文件夹，包含了与Bootstrap表单构造器相关的资源文件，如CSS样式表、JavaScript库、图片和其他必要的Web资产。这些文件是构建和运行表单构造器所必需的，它们确保了表单构造...
PHP自动生成表单代码分享
12-18
包括`$layout`（是否使用表格布局）、`$action`（表单提交的URL）、`$method`（表单提交方式，默认为POST）、`$enctype`（编码类型，默认为空）、`$name`（表单名称）、`$id`（表单ID）和`$class`（表单CSS类名）。...
实例 - 性别选择
Beluga_白鲸
11-25 7959
效果图： 使用的是AlertDialog xml： <EditText android:id="@+id/sex_text" android:layout_width="100dp" android:layout_height="wr
radio单选按钮实现男、女性别只能选择一个
热门推荐
spaceX_91的博客
09-05 13万+
http://www.newphper.com/post/385.html HTML中的radio单选按钮实现男女性别选择，普遍逻辑肯定是只能选择其中一个，要实现这个功能可以在<input>标签里加一个name属性，并设置name属性值相同即可！ 例如： <input name="sex" type="radio" checked="checked"/>男 ...
性别 图标 css,CSS实现小图标
weixin_31099497的博客
08-04 568
关闭图标.close {position: relative;display: inline-block;width: 12px;height: 12px;}.close:before {content: '';display: inline-block;position: absolute;top: 6px;width: 12px;border-top: 1px solid #ddd;trans...
css中margin、padding属性用法
12-23 501
样式单边距margin使你能够在网页上的元素的矩形区域外部添加空隙。需要记住的 是,margin属性处理的是元素外面的间距。 以下是设置边距的样式属性 margin-top:设置上边距 margin-right:设置右边距 margin-bottom:设置下边距 margin-left:设置左边距 margin:在一个属性中设置上、右、下、左边距。 希望每个周围边距为15个像素，可
css构造超链接
01-16 296
css构造超链接 a { /*IE6 IE7不显示下划虚线*/ text-decoration:none; color:red; border-bottom:1px dashed #333; display:block; width:140px; line-height:150%;
css区块、浮动、定位、溢出、滚动条
01-14 251
CSS div { background:red; width:200px; height:100px; overflow:auto; scrollbar-face-color :pink; }
1、 HTML+CSS构造网页整体布局  构造如图1所示网页效果，网页分上、中、下三部分：  顶部：设置背景图片或颜色，欢迎词；  中部：居中放置第2考察点实现的表单；  底部：设置背景图片或颜色，版权等信息；  实现3部分基本架构即可，其中涉及的图片、颜色、字体、字号等具体细节自主选择。
最新发布
02-21
使用HTML和CSS来构建网页整体布局，可以将网页分为三...中部，居中放置第2考察点实现的表单；底部，设置背景图片或颜色，版权等信息。实现3部分基本架构即可，其中涉及的图片、颜色、字体、字号等具体细节自主选择。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值