fieldset在form中的用法（表单简单实例）

fieldset：对表单进行分组，一个表单可以有多个fieldset。

fieldset标签会在包含的文本和input等表单元素外面形成一个方框，legend元素作为标题。


<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head><body>
<form>
<fieldset>
<legend>个人注册  </legend>
</fieldset>
</form>
</body>
</html>

效果：

完整代码：


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<style>.p0{width:600px;height:330px;background-image:url("bg03.jpg");background-repeat: no-repeat;}fieldset{width:330px;height:170px;color:white;font-size:20px;position:relative;top:10px;left:15px;}.p1{position: relative;top:40px;left:40px;font-size: 14px;}.p2{position: relative;top:60px;left:40px;font-size: 14px;}img{position:absolute;top:126px;left:130px;}
</style>
</head>
<body>
<div class="p0">
<form action="">
<fieldset>
<legend>个人注册 </legend>
<div class="p1">用户账号: <input type="text" size="25"><br></div>
<div class="p2">&nbsp &nbsp&nbsp &nbsp 密码: <input type="text" size="25"><br></div>
<img src="btn.jpg" width="100" height="30" />
</fieldset>
</form>
</div>
</body>
</html>

注：提交按钮不能实现提交作用，当时用的是老师给的照片。本例只是给出基本的表单设置样例。

fieldset在form中的用法（表单简单实例）相关推荐

fieldset在form中的用法
在表单的应用中,我们有时会用到对 form 的信息进行分组,例如"注册(regForm)",可能会将注册信息分组成基本信息(一般为必填),详细信息(一般为可选),因此可考虑在 fo ...
使用Vue动态生成form表单的实例代码
具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流: ...
12、HTML ＜form＞标签（表单）
从传统意义上讲,"表单"这个词指代的是一个文档,这个文档中有一些空白区域可供用户填写信息.区别于传统意义上的表单,HTML 中的表单不仅可以供用户填写信息还可以为用户提供信息. 例 ...
html语言怎么清除用户名 name= password=,在html页面中填写注册表单后，它会给出这个错误，并使用用户名和密码并将值存储在登录表单中...
在html页面中填写注册表单后,它会给出此错误,并使用用户名和密码并将值存储在登录表单中:TypeError at /login/ argument of type 'NoneType' is not ...
【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放
导航 [初探HTML5之使用新标签布局]用html5布局我的博客页! [HTML5初探之form标签]解放表单验证.增加文件上传.集成拖放 [HTML5初探之绘制图像(上)]看我canvas元素引领下 ...
react hooks使用_我如何使用React Hooks在约100行代码中构建异步表单验证库
react hooks使用 by Austin Malerba 奥斯汀·马勒巴(Austin Malerba) 我如何使用React Hooks在约100行代码中构建异步表单验证库 (How I bu ...
form generator ——Element UI表单设计及代码生成器
form generator Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中. 网站地址:https://mrhj.gitee.io/form-ge ...
如何在WordPress中创建RSVP表单（简易）
Are you planning a big event like a birthday party, fundraiser, or even a wedding? Then you need an ...
form表单嵌套，用标签的form属性来解决表单嵌套的问题
form表单嵌套,用标签的form属性来解决表单嵌套的问题参考文章: (1)form表单嵌套,用标签的form属性来解决表单嵌套的问题 (2)https://www.cnblogs.com/jpfs ...

fieldset在form中的用法（表单简单实例）

效果：

完整代码：

fieldset在form中的用法（表单简单实例）相关推荐

最新文章

热门文章