Web小案例——智能表单

最新推荐文章于 2024-03-24 18:26:15 发布

codeLiuhy

最新推荐文章于 2024-03-24 18:26:15 发布

阅读量374

点赞数

分类专栏： h5基础篇文章标签： html css3

本文链接：https://blog.csdn.net/qq_42000660/article/details/118858805

版权

h5基础篇专栏收录该内容

23 篇文章 2 订阅

订阅专栏

一、完成效果

二、代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>智能表单</title>
	</head>
	<style type="text/css">
		* { margin: 0px; padding: 0px;}
		form{ background-color: #9ab106;overflow: auto;padding: 20px;padding-top: 0px;margin-top:20px;width: 520px;margin: auto;border-radius: 5px;}
		p{ font-size: 16px;color: #333;font-weight: bold;margin: 15px;}
		.item{ font-size: 14px;border: 3px solid #fff;border-radius: 5px;background: rgba(255,255,255,0.6);padding:5px 0px;margin-bottom: 10px;}
		.item>span{ padding-left: 10px;display: inline-block;width: 120px;}
		.item>input{ background-color: #fff;width: 260px;padding:5px; border: none;outline: none;border-radius: 5px;}
		.item>input[type=radio]{ width: 20px;height: 16px; margin-right: 10px;}
		.item>textarea{ height: 80px;width: 260px;border: none;vertical-align: top;border-radius: 3px;padding: 3px;outline: none;}
		button{ background-color: rgba(0,0,0,0.7);color: #fff;text-align: center;margin: auto;display: block;height: 30px;width: 120px;border: none;border-radius: 15px;margin-top: 20px;}
	</style>
	<body>
		<form action="" method="post">
			<div>
				<p>第一步，详细信息</p>
				<div class="item">
					<span>姓名</span>
					<input type="text" name="name" placeholder="请输入姓名" />
				</div>
				<div class="item">
					<span>电话</span>
					<input type="number" name="phone" placeholder="请输入电话" />
				</div>
				<div class="item">
					<span>Facebook主页</span>
					<input type="url" name="name" placeholder="请输入地址" />
				</div>
			</div>
			<div>
				<p>第二步，收货地址</p>
				<div class="item">
					<span>详细地址</span>
					<textarea name="address" placeholder="请输入详细地址"></textarea>
				</div>
				<div class="item">
					<span>邮编</span>
					<input type="number" maxlength="6" name="postNum" placeholder="请输入邮编" />
				</div>
			</div>
			<div>
				<p>第三步，银行卡信息</p>
				<div class="item radio">
					<span>银行卡类型</span>
					<input type="radio" name="card1" >借记卡
					<input type="radio" name="card2" >信用卡
					<input type="radio" name="card3" >VISA卡
				</div>
				<div class="item">
					<span>卡号</span>
					<input type="number" name="cardNumber" placeholder="请输入卡号" />
				</div>
				<div class="item">
					<span>密码</span>
					<input type="password" name="cardNumber" value="" />
				</div>
				<div class="item">
					<span>持卡人</span>
					<input type="text" name="user" value="" />
				</div>
			</div>
			<button type="submit">提交</button>
		</form>
	</body>
</html>

三、总结

1、选择器：通过元素属性，如案例中设置单选按钮的样式，通过input[type=radio]获取

2、设置span标签的宽度，因为span本身是行内元素，宽度受元素内容影响，直接设置width是没有效果的，设置display为inline-block，意为内联块级元素，默认排在一行并且可以设置宽高

3、outline属性，当触发input焦点事件时，input会默认有边框样式，若要去除边框效果，设置outline为none

4、resize属性，textarea可以拖拽右下角改变大小，如果想要去除该效果，设置resize为none，如果只需要调整垂直方向的大小，设置resize为vertical，调整水平方向的大小，resize为horizontal

5、curse属性，将鼠标移到某个元素区域内需要将光标变为手指，则可以设置curse:pointer

codeLiuhy

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Web小案例——智能表单

一、完成效果二、代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>智能表单</title> </head> <style type="text/css"> * { margin: 0px; padding: 0px;} form{ background-color: #9ab106;overflow: .
复制链接

扫一扫

专栏目录