Form CSS

最新推荐文章于 2022-08-05 21:35:38 发布
原创 最新推荐文章于 2022-08-05 21:35:38 发布 · 2.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#radiobutton #input #stylesheet #html #xhtml #file

常用HTML控件的样式，很酷的

样式表t2style.css

INPUT {
 BORDER-RIGHT: #afc2cc 1px solid; BORDER-TOP: #afc2cc 1px solid; FONT-SIZE: 11px; BORDER-LEFT: #afc2cc 1px solid; BORDER-BOTTOM: #afc2cc 1px solid; FONT-FAMILY: verdana; BACKGROUND-COLOR: #ffffff
}
INPUT.BUTTON {
 BORDER-RIGHT: rgb(99,110,139) 1px solid; BORDER-TOP: rgb(99,110,139) 1px solid; FONT-WEIGHT: normal; FONT-SIZE: 11px; BORDER-LEFT: rgb(99,110,139) 1px solid; BORDER-BOTTOM: rgb(99,110,139) 1px solid; FONT-STYLE: normal; FONT-FAMILY: verdana, Arial, Helvetica; BACKGROUND-COLOR: #f3f0f0; FONT-VARIANT: normal
}
INPUT.CHECK {
 BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; BACKGROUND-COLOR: transparent
}
SELECT {
 FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: verdana, Arial, Helvetica; BACKGROUND-COLOR: #ffffff
}
TEXTAREA {
 BORDER-RIGHT: #afc2cc 1px solid; BORDER-TOP: #afc2cc 1px solid; FONT-SIZE: 11px; BORDER-LEFT: #afc2cc 1px solid; BORDER-BOTTOM: #afc2cc 1px solid; FONT-FAMILY: verdana
}
 

HTML应用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="t2style.css" _fcksavedurl=""t2style.css"" _fcksavedurl=""t2style.css"" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
//-->
</script>
</head>

<body>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
  <label>
  <input type="text" name="textfield" />
  </label>
  <p>
    <label>
    <textarea name="textarea"></textarea>
    </label>
  </p>
  <p>
    <label>
    <input type="checkbox" name="checkbox" value="checkbox" />
    </label>
  </p>
  <p>
    <label>
    <input type="radio" name="radiobutton" value="radiobutton" />
    </label>
  </p>
  <p>
    <label>
    <input type="radio" name="RadioGroup1" value="单选" />
单选</label>
    <br />
    <label>
    <input type="radio" name="RadioGroup1" value="单选" />
单选</label>
  </p>
  <p>
    <label>
    <select name="select">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    </label>
  </p>
  <p>
    <select name="menu1" onchange="MM_jumpMenu('parent',this,0)">
      <option>unnamed1</option>
    </select>
  </p>
  <p>
    <label>
    <input type="file" name="file" />
    </label>
  </p>
  <p>
    <label>
    <input type="submit" name="Submit" value="提交" />
    </label>
  </p>

  <fieldset><legend>111</legend>xxxx<br>axxx</fieldset><br />
  <a href="forms.html"></a>
</form>
</body>
</html>

CSS中form元素的用法详解及示例代码
DevSavantX的博客
10-03 504
同时，设置了宽度、外边距和内边距等属性来调整表单元素的布局，使其在页面中水平居中显示。在上述示例代码中，我们通过设置输入框的背景色、边框样式、字体样式等属性，美化了输入框的样式；在上述示例代码中，我们通过设置输入框的背景色、边框样式、字体样式等属性，美化了输入框的样式；margin和padding：设置表单元素的外边距和内边距，用于调整表单元素之间的间距和内部内容的间距。除了控制表单布局外，我们还可以通过CSS来美化表单元素的样式，例如改变输入框的背景色、字体颜色等。
在Django的form中使用CSS进行设计的方法
01-20
修改form的显示的最快捷的方式是使用CSS。 尤其是错误列表，可以增强视觉效果。自动生成的错误列表精确的使用“ ”errorlist”>“，这样，我们就可以针对它们使用CSS。 下面的CSS让错误更加醒目了： <style type...
form&css
duanduan339的博客
08-05 230
form&css 一、表单（重点） form标签 常用属性： action：表单数据的提交路径 method：表单的提交方式。常用的方式有：get / post input标签 常用属性： type： text：默认值。文本框 password：密码框 radio：单选按钮。 默认值设置：在需要默认选中的选项上，增加属性：checked或者checked=“che...
css美化form
03-08
通过css来美化form。
form表单以及CSS
m0_68989458的博客
08-05 3482
HTML以及css的基础使用
【CSS表单form】
魔术师
06-11 3007
【CSS表单form】 表单（form）的作用 主要负责数据的采集，作为网页与用户接触最直接、最频繁的页面元素，其在网站用户体验中占有最重要的位置，常常用于用户注册、登录、投票等的制作。 form的属性 action：表单提交的地址 method：表单数据提交的方法/形式 get：明文发送（可见）
contact-form-css-template.zip_PURE_contact form_css_html5
09-22
标题 "contact-form-css-template.zip_PURE_contact form_css_html5" 提供的是一个使用纯CSS设计的联系表单模板，这是一套适用于网站的简洁且功能齐全的交互式表单。这个压缩包包含了一系列用于构建这样一个表单所需...
6款漂亮HTML CSS样式用户留言表单的相关源码
09-05
而CSS则负责控制这些元素的外观和布局，如颜色、字体、大小、位置等，实现页面的美化和个性化。 这6款不同的留言表单源码，每一种都展示了独特的设计风格和功能特性。它们可能包括以下部分： 1. 表单布局：表单的...
html5+css3实现酷炫的form表单
11-10
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能强大且视觉效果丰富的form表单提供了无限可能。在本教程中，我们将探讨如何利用这两者的优势来设计和实现酷炫的form表单。 首先，HTML5引入了新的表单元素...
表单样式form.css
weixin_30561177的博客
10-24 845
/**附件样式表。*/div.attachement{ float:left; overflow:hidden; padding:3px 0 0 15px; white-space:nowrap; } span.attachement-span{ float:left; background:#f5f6f4; border:1px solid #e1e1e1; margin:...
Validform5.3.2的style.css
12-16
Validform5.3.2的最难找的style.css，和demo。css文件在demo中。按需自己粘贴。
CSS 表单
12-13
CSS 表单 一个表单案例，我们使用 CSS 来渲染 HTML 的表单元素： CSS 实例 input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding:
css表单
TF_LIU的博客
07-07 688
//DOCTYPE 声明 //这是一个W3C的标准ang代表language，lang="en"，"en" 即english xml:lang就是xml的语言，xml是一种html扩展语言，功能强大。 //描述文档类型，页面字符集 Document//设置网页title .box{ border: 1px solid red;//表格外框宽度和颜色 width: 400px;
css中form怎么用,如何用css做form表单？css form表单制作的方法
weixin_33302571的博客
08-03 996
网页中的表单是用于搜集用户的输入，简而言之，就是表单是网页与用户交互的一个不可或缺的元素，也就是说表单是用于向服务器传输数据的，总而言之，表单在网页中是非常重要的，所以，接下来的这篇文章将给大家来介绍如何用css来制作一个form表单，话不多说，让我们来看一下用css做form表单的具体内容。首先我们需要知道form表单是由不同类型的标签组成，下面我们来看一下有哪些标签。Form：定义表单的范围。...
form 表单 跟 CSS样式
heronghua008的博客
02-18 1029
form 表单 form表单提交数据的几个注意事项： 1.所有获取用户输入的标签都必须在form表单里面 2.action控制着往哪儿提交 3.input\select\textarea 都需要有name属性 4.提交按钮&lt;input type="submit"&gt; input 系列的type属性 text     文本框 password 密码框 radio 单选框 ...
Form标签+Css基础
TATA2015的博客
12-14 306
一、Form表单标签 <form action="" method=""></form> 表单就是用来将用户的信息提交到服务器，服务器会将信息存储或者根据信息查询数据（增删改查）。 表单中所有的内容都要写在form标签中。 <input type="text" value="哈哈哈哈" placeholder="请输入用户名">...
CSS：表单
weixin_33728708的博客
03-02 209
2019独角兽企业重金招聘Python工程师标准>>> ...
form表单如何加css框架,如何写好CSS系列之表单(form)
weixin_36002026的博客
08-04 1891
表单模块可以分为两部分：一是表单的布局，也就是规范表单元素单元的排列位置；二是表单元素，如：输入框、单选、复选、列表组件、搜索组件等，由于列表组件、搜索组件不是单纯的css组件，所以暂且没有实现。一、表单布局的实现表单布局分为：表单容器、行、表单元素组(包含元素标题、元素)。并且实现根据屏幕进行自适应。示例效果如下：从示例效果可以看出，布局会根据浏览器大小实现自适应。自适应代码如下：@import...
CSS-form表单及input表单控件
qq_54282411的博客
06-16 4169
一、表单 1.认识表单 在HTML中，一个完整的表单通常由表单控件（也被称为表单元素）、提示信息和表单域3个部分构成。 2.创建表单 在HTML中，<form></form>标记被用于定义表单域，即表单开始和结束的位置，所有表单元素都在在这对标记中。 语法格式： <form action=”url地址” method=”提交方式” name=”表单名称”> 表单控件 </form> <form>标记的常用属性 属性名 含义
el-form css实现边框border-radius
最新发布
09-05
在Element UI的`el-form`组件中，如果你想为其添加圆角边框效果，你可以通过CSS来实现。Element UI本身并没有内置提供`border-radius`样式，但是你可以自定义其样式来达到这个效果。以下是基本步骤： 1. 首先，选中`el-form`元素或者其他包含该表单的容器。例如，如果你直接操作的是根元素，可以使用`.el-form`选择器。 ```css .el-form { border-radius: 5px; /* 可以调整数值以改变圆角大小 */ border: 1px solid #ccc; /* 如果有边框，可以设置颜色 */ } ``` 2. 如果你希望特定部分（如表单标签、输入框等）有不同的圆角，可以添加相应的类名并单独设置它们： ```css .el-form-item__label { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .el-form-item__control { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } ``` 记得将上述样式应用到你的项目中，并确保它们在浏览器上生效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值