Form CSS

最新推荐文章于 2022-04-25 17:20:20 发布
最新推荐文章于 2022-04-25 17:20:20 发布
阅读量2.1k 收藏
点赞数
分类专栏： HTML相关 文章标签： radiobutton input stylesheet html xhtml file
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maxgong2005/article/details/1211100
版权

常用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" οnchange="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>

maxgong2005
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
form表单以及CSS
m0_68989458的博客
08-05 3147
HTML以及css的基础使用
form&css
duanduan339的博客
08-05 168
form&css 一、表单（重点） form标签 常用属性： action：表单数据的提交路径 method：表单的提交方式。常用的方式有：get / post input标签 常用属性： type： text：默认值。文本框 password：密码框 radio：单选按钮。 默认值设置：在需要默认选中的选项上，增加属性：checked或者checked=“che...
【CSS表单form】
魔术师
06-11 2747
【CSS表单form】 表单（form）的作用 主要负责数据的采集，作为网页与用户接触最直接、最频繁的页面元素，其在网站用户体验中占有最重要的位置，常常用于用户注册、登录、投票等的制作。 form的属性 action：表单提交的地址 method：表单数据提交的方法/形式 get：明文发送（可见）
表单样式form.css
weixin_30561177的博客
10-24 790
/**附件样式表。*/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:...
css表单
TF_LIU的博客
07-07 615
//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 882
网页中的表单是用于搜集用户的输入，简而言之，就是表单是网页与用户交互的一个不可或缺的元素，也就是说表单是用于向服务器传输数据的，总而言之，表单在网页中是非常重要的，所以，接下来的这篇文章将给大家来介绍如何用css来制作一个form表单，话不多说，让我们来看一下用css做form表单的具体内容。首先我们需要知道form表单是由不同类型的标签组成，下面我们来看一下有哪些标签。Form：定义表单的范围。...
form 表单 跟 CSS样式
heronghua008的博客
02-18 966
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 244
一、Form表单标签 <form action="" method=""></form> 表单就是用来将用户的信息提交到服务器，服务器会将信息存储或者根据信息查询数据（增删改查）。 表单中所有的内容都要写在form标签中。 <input type="text" value="哈哈哈哈" placeholder="请输入用户名">...
CSS：表单
weixin_33728708的博客
03-02 158
2019独角兽企业重金招聘Python工程师标准>>> ...
css美化form
03-08
通过css来美化form。
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:
form表单如何加css框架,如何写好CSS系列之表单(form)
weixin_36002026的博客
08-04 1710
表单模块可以分为两部分：一是表单的布局，也就是规范表单元素单元的排列位置；二是表单元素，如：输入框、单选、复选、列表组件、搜索组件等，由于列表组件、搜索组件不是单纯的css组件，所以暂且没有实现。一、表单布局的实现表单布局分为：表单容器、行、表单元素组(包含元素标题、元素)。并且实现根据屏幕进行自适应。示例效果如下：从示例效果可以看出，布局会根据浏览器大小实现自适应。自适应代码如下：@import...
CSS-form表单及input表单控件
qq_54282411的博客
06-16 3875
一、表单 1.认识表单 在HTML中，一个完整的表单通常由表单控件（也被称为表单元素）、提示信息和表单域3个部分构成。 2.创建表单 在HTML中，<form></form>标记被用于定义表单域，即表单开始和结束的位置，所有表单元素都在在这对标记中。 语法格式： <form action=”url地址” method=”提交方式” name=”表单名称”> 表单控件 </form> <form>标记的常用属性 属性名 含义
【form表单与CSS简介】
Ban_a的博客
04-25 1120
文章目录HTML:form表单Name 属性表单包含表单元素CSS简介：CSS选择器基本选择器：组合选择器:分组与嵌套:伪类选择器，网页设计中常用的CSS属性 HTML:form表单 表单：用于搜集不同类型的用户输入 <form> . form elements . </form> action属性：控制数据的提交地址。 方式1:写全路径 action=“http://www.aa7a.cn/user.php” 方式2:写后缀(自动补全IP和PORT) action=“us
表单添加 css
shitou的博客
01-07 753
type="text/javascript" src="../libs/jquery-1.11.0.min.js">   http-equiv="content-type" content="textml; charset=UTF-8">   type="text/javascript">   //页面加载完成   $(functio
HTML表单&CSS
yahweh_liu的博客
04-26 1517
HTML表单&CSS 今日内容介绍 使用html的表单标签编写“注册页面” 今日内容学习目标 能够使用<form><input>等标签编写注册表单 熟悉的CSS样式的3种导入方式 熟悉CSS选择器的使用 了解CSS基本属性使用 了解CSS盒子模型 今日学习标签总览 今天讲学习表单标签，提供总览方便大家更好的吸收。 第1章网站用户注册页面...
CSS 列表及表单
是什么让你停止不前？
08-29 1043
一. 列表 标签 前端中列表分为两种: 有序列表 无序列表 1. 无序列表 无序列表一般应用在布局中的新闻标题列表和文章标题列表以及菜单，它是含有语义的，标签结构如下： 使用方式: ul&gt;li{列表标题}*3 &lt;ul&gt; &lt;li&gt;列表标题&lt;/li&gt; &lt;li&gt...
【HTML/CSS】表单美化
~★sunshine☆的博客专栏
09-21 6668
表单美化单选按钮 表单美化单选按钮 *{padding:0;margin:0;} .type{width:400px;height:32px;border:1px solid #0F0;margin:30px auto;} .type a{text-decoration:none;color:#666;} body{font:12px/22px 微软雅黑;} .type dl{hei
form表单精美css
最新发布
10-12
以下是一个简单的form表单精美css样式： ```html <form> <div class="form-group"> <label for="name">姓名</label> <input type="text" id="name" name="name" required> </div> <div class="form-group"> <label for="email">邮箱</label> <input type="email" id="email" name="email" required> </div> <div class="form-group"> <label for="message">留言</label> <textarea id="message" name="message" required></textarea> </div> <button type="submit">提交</button> </form> ``` ```css .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 5px; font-weight: bold; } input[type="text"], input[type="email"], textarea { display: block; width: 100%; padding: 10px; border: none; border-radius: 5px; background-color: #f5f5f5; } button[type="submit"] { display: block; margin-top: 20px; padding: 10px; border: none; border-radius: 5px; background-color: #007bff; color: #fff; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值