前端之HTML智能表单

最新推荐文章于 2024-06-02 23:26:49 发布

冥极醉醉冥极

最新推荐文章于 2024-06-02 23:26:49 发布

阅读量86

点赞数

分类专栏：前端学习文章标签： html5 css

本文链接：https://blog.csdn.net/qq_19831379/article/details/119043983

版权

前端学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			form {
				width: 350px;
				background-color: #9CBC2B;
				margin: 20px auto;
				padding: 0 15px;
				color: #364411;
				/* 圆角，半径为15px */
				border-radius: 15px;
			}
			
			.step {
				font-size: 14px;
				font-weight: bold;
				margin: 10px 0;
			}
			
			.form-line {
				border-radius: 5px;
				border-color: #F0F5DF;
				border-width: 2px;
				border-style: solid;
				padding: 3px;
				margin: 3px 0;
				background-color: #CEDE95;
				font-size: 12px;
				padding-left: 10px;
			}
			
			.form-line span {
				display: inline-block;
				width: 110px;
			}
			
			.form-line input {
				/* 去掉光圈 */
				outline: none;
				background-color: white;
				border: none;
				height: 20px;
				border-radius: 3px;
				width: 180px;
			}
			
			/* 筛选出radio的input */
			.form-line input[type=radio] {
				width: 25px;
				height: 12px;
			}
			
			.form-line textarea {
				width: 180px;
				height: 70px;
				vertical-align: top;
				border: none;
				border-radius: 3px;
				/*  none:控制文本框的大小不改变
					horizontal:水平调整
					vertical:垂直调整*/
				resize: none;
				/* 去掉光圈 */
				outline: none;
			}
			
			input.submit-btn {
				border: none;
				background-color: #374313;
				color: white;
				display: block;
				width: 100px;
				padding: 5px 0;
				border-radius: 20px;
				margin: 10px auto;
				/* 鼠标放入变成小手的形状 */
				cursor: pointer;
			}
			
			.box {
				width: 50px;
				height: 50px;
				margin: 50px;
				border: 1px solid black;
				border-radius: 25px;
				outline: black solid 10px;
				outline-offset: -35px;
			}
		</style>
	</head>
	<body>
		<form  action="">
			<section>
				<p class="step">第一步:详细信息</p>
				<p class="form-line">
					<span>姓名</span>
					<input type="text" placeholder="请输入姓名" />
				</p>
				<p class="form-line">
					<span>电话</span>
					<input type="number" placeholder="请输入手机号" />
				</p>
				<p class="form-line">
					<span>个人主页</span>
					<input type="url" />
				</p>
				<p class="form-line">
					<span>邮箱</span>
					<input type="email" />
				</p>
			</section>
			<section>
				<p class="step">第二步:收货地址</p>
				<p class="form-line">
					<span>详细地址</span>
					<textarea  placeholder="详细地址..."></textarea>
				</p>
				<p class="form-line">
					<span>邮编</span>
					<input type="text"/>
				</p>
			</section>
			<section>
				<p class="step">第三步:银行卡</p>
				<p class="form-line">
					<span>银行卡类型</span>
					<input type="radio" name="cardType" />借记卡
					<input type="radio" name="cardType" />信用卡
					<input type="radio" name="cardType" />VISA卡
				</p>
				<p class="form-line">
					<span>卡号</span>
					<input type="number" placeholder="请输入手机号" />
				</p>
				<p class="form-line">
					<span>密码</span>
					<input type="password" />
				</p>
				<p class="form-line">
					<span>持卡人</span>
					<input type="text" />
				</p>
			</section>
			<p>
				<input type="submit" class="submit-btn" value="提交" />
			</p>
		</form>
		<hr/>
		<div class="box"></div>
	</body>
</html>

冥极醉醉冥极

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端之HTML智能表单

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } form { width: 350px; background-color: #9CBC2B; margin: 20px auto;.
复制链接

扫一扫