HTML <form>表单加外边框

作者:CYL

日期:2020-10-11

标签 form 表单 加框

问题:现在 已有的HTML代码是

	<form action="form_action.asp" method="get">
		<p>First name: <input type="text" name="fname" /></p>
		<p>Last name: <input type="text" name="lname" /></p>
		<input type="submit" value="Submit" />
	</form>

对应的图为在这里插入图片描述
但是现在我想要给该表单加上一个外边框
变成下图这样在这里插入图片描述
那么更改代码为:

	<form action="form_action.asp" method="get">
		<fieldset>  <!--加外边框-->
			<p>First name: <input type="text" name="fname" /></p>
			<p>Last name: <input type="text" name="lname" /></p>
			<input type="submit" value="Submit" />
		</fieldset>
	</form>

如果想要给外边框加上一个名字
那么在中加上一个标签即可
在这里插入图片描述

	<form action="form_action.asp" method="get">
		<fieldset>  <!--加外边框-->
			<legend>注册表单</legend>
			<p>First name: <input type="text" name="fname" /></p>
			<p>Last name: <input type="text" name="lname" /></p>
			<input type="submit" value="Submit" />
		</fieldset>
	</form>
注:HTML需要记的标签太多了 一老忘
  • 17
    点赞
  • 67
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
可以尝试使用CSS的border-radius属性来设置边框弧度。 重新编写后的代码如下: ```html <div class="layui-container"> <!--上边框--> <div class="layui-row"> <div class="layui-col-md-4"> <!--左侧部分--> <form class="layui-form layui-form-pane" id="formData" style="border: 1px solid #0C0C0C; padding: 20px 0 0px 30px;margin:30px -1px 0px 0px; border-radius: 5px 0 0 5px;"> </form> </div> <div class="layui-col-md-4"> <!--中间部分--> <form class="layui-form layui-form-pane" id="formData2" style="margin:30px -1px 0px 0px;border: 1px solid #0C0C0C; padding: 20px 0 0px 30px; border-radius: 0;"> </form> </div> <div class="layui-col-md-4"> <form class="layui-form layui-form-pane" id="formData3" style="margin-top: 30px; border-radius: 0 5px 5px 0;"> <div class="layui-form-item" style="height: 100px;border: 1px solid #0C0C0C; padding: 20px 0 35px 30px;margin: -1px 0px 0px 0px; border-radius: 5px 0 0 0;"></div> <div class="layui-form-item" style="height: 220px;border: 1px solid #0C0C0C; padding: 20px 0 20px 30px;margin: -1px 0px -1px 0px;"></div> <div class="layui-form-item" style="height: 240px;border: 1px solid #0C0C0C; padding: 15px 0 52px 30px; border-radius: 0 0 5px 0;"></div> </form> </div> </div> </div> ``` 在这个代码中,我们给每一部分的表单设置了不同的边框弧度,使它们在组合起来时能够呈现出合理的外观。同时,我们也通过border-radius属性来设置了四周的弧度。边框样式上我们去掉了重合部分的粗效果,并对其进行了对齐处理。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

中南大学苹果实验室

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值