form表单样式案例

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">* {margin: 0;padding: 0;font-size: large;}.all {height: 600px;width: 500px;background-color: #F5F5F5;margin: 0 auto;}.content {padding-top: 30px;height: 570px;width: 400px;margin: 0 auto;}.p1 {font-weight: bold;}.p2 {margin-left: 10px;}.m {margin-left: 30px;}.s {margin-left: 150px;}span {margin-left: 280px;text-align: right;}</style></head>
<body><div class="all"><div class="content"><form action="" method="post" enctype="multipart/form-data"><span> *所在为必填项</span><p class="p1"> 个人信息 <img src="img/line.png" width="320px"></p><table cellspacing="10px"><tr><td>姓名*</td><td colspan="3"><input type="text"/></td></tr><tr><td>地址*</td><td colspan="3"><input type="text"/></td></tr><tr><td>出生*</td><td><select><option>1</option></select></td><td><select><option>Jan</option></select></td><td><select><option>1979</option></select></td></tr><tr><td>性别*</td><td colspan="3"><select><option>男</option></select></td></tr></table><p class="p1"> 其它信息 <img src="img/line.png" width="320px"></p><p class="p2"> 你喜欢这个表单吗？ <img src="img/line.png" width="220px"></p><input type="radio" name="habit" class="m">  喜欢<input type="radio" name="habit">不喜欢<br><p class="p2"> 你喜欢什么运动? <img src="img/line.png" width="245px"></p><input type="checkbox" name="sport" class="m">足球<input type="checkbox" name="sport">篮球<input type="checkbox" name="sport">篮球<br><p class="p2">请写下你的建议？* <img src="img/line.png" width="230px"></p><textarea cols="30" rows="10" class="m"></textarea><br><input type="submit" value="提交个人信息" class="s"></form></div>
</div>
</body>
</html>

截图：

form表单样式案例相关推荐

如何设置好看的form表单样式_网页开发之表格用法，该如何制作？
表格的主要作用 1 2 3.表格的具体用法: <table> <tr> <td>单元格内的文字td> ... tr> ... table> 1.& ...
还不错的Table样式和form表单样式
作为一个后台开发人员而言,拥有一套属于自己的前台样式是比较重要的,这里分享一下自己感觉还不错的样式,以后遇到好的,还会陆续添加上图: 带鼠标滑动效果的table样式看起来比较清爽样式 <he ...
elementUI的form表单样式
/*form表单的样式*//deep/ .demo-form-inline {height: 30px;line-height: 30px;margin-left: 43px;//label样式.el ...
element-ui的form表单样式改动
造成下面样式错乱是下面自带的css样式,原本打算通过样式重写在组件内的style,发现下面相应的元素是出于封装情况的,无论样式重写在组件还是在公共样式均不能很好的解决,因为跳转到该页面时都要刷新一次, ...
如何设置好看的form表单样式_Qamp;A| 表单如何设置短信提醒
Hi,大家好,表姐又来给大家答疑解惑啦!这一期的Q&A答疑我们来聊聊表单该如何设置短信提醒. 表单的短信提醒功能非常有用,通过手机短信及时反馈信息,让你实时掌握数据最新动态,不仅可以设置给表单 ...
基于django源码自定义前端form表单样式
在项目中,我们通常会用django中的modelform帮助我们快速生成前端的样式,提升开发效率.但是有时,当我们需要让一些字段,显示一些特殊的样式时,就需要对modelform中的默认样式,手动进行 ...
如何设置好看的form表单样式_微信新样式！微信设置“特效字体”，朋友圈变笑脸，好看！...
阅读本文前,请您先点击上面的"蓝色字体",再点击"关注",这样您就可以继续免费收到文章了.每天都会有分享,都是免费订阅,请您放心关注. [免责声明]本文部分文字 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
框架生成的HTML修改,Django框架form表单验证修改html标签的样式
经过前面的学习,我们大致可以知道CharField.EmailField等等以Field结尾的方法,只能帮助我们对用户发来的信息做验证,不能生成html标签.字段本身自己虽然只做验证,但是我们可以通过 ...
修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...

form表单样式案例

form表单样式案例相关推荐

最新文章

热门文章