精华内容
下载资源
问答
  • 2021-08-27 10:05:45
    /*form表单的样式*/
      /deep/ .demo-form-inline {
        height: 30px;
        line-height: 30px;
        margin-left: 43px;
        //label样式
        .el-form-item__label {
          color: #D0E9FF;
          font-size: 14px;
          line-height: 30px;
        }
    
        //输入框样式
        .el-input__inner {
          background: transparent;
          height: 30px;
          line-height: 30px;
          border: 1px solid #D0E9FF;
          color: #FFFFFF;
          border-radius: 0;
        }
    
        //提示文字样式
        .el-input__inner::-webkit-input-placeholder {
          color: rgba(208, 233, 255, 0.5);
          font-size: 14px;
        }
    
        //form-item的样式
        .el-form-item__content {
          line-height: 30px;
          position: relative;
          font-size: 14px;
        }
    
        //日期选择背景颜色
        .el-range-editor .el-range-input {
          background: transparent;
          color: #fff;
        }
    
        .el-date-editor .el-range-separator {
          color: #D0E9FF;
        }
    
        .el-date-editor .el-range__icon {
          line-height: 25px;
        }
    
      }
    
    更多相关内容
  • 写了好多表单样式 ,这个表单样式是我比较满意的Form表单样式
  • form表单样式

    千次阅读 2017-10-24 10:53:00
    我们会经常遇到许多密码的登录和注册, 这个时候我们就可以先写好一个模块进行参考 源代码如下: ... 表单样式    * {  font-size: 12px;  margin: 0;  padding: 0;  }  input {

    我们会经常遇到许多密码的登录和注册, 这个时候我们就可以先写好一个模块进行参考微笑

    源代码如下:

    <!DOCTYPE html>

    <html>
    <head>
        <meta charset="UTF-8">
        <title>表单样式</title>
        <style type="text/css">
            * {
                font-size: 12px;
                margin: 0;
                padding: 0;
            }


            input {
                width: 320px;
                height: 24px;
                border: 1px solid #999;
                border-radius: 4px;
            }


            .formErr {
                border: 1px solid red;
            }


            .form .label {
                display: block;
                float: left;
                width: 128px;
                height: 40px;
                line-height: 40px;
                text-align: end;
            }


            .form .txt {
                display: block;
                float: left;
                width: 340px;
                height: 40px;
                line-height: 40px;
                padding-left: 16px;
            }


            .form button {
                width: 56px;
                height: 24px;
                background-color: green;
                border: 0;
                border-radius: 4px;
                color: white;
            }


            .form .errTips {
                width: 226px;
                background-color: lightpink;
                color: darkred;
                border-radius: 4px;
                margin-left: 144px;
                margin-top: 6px;
                margin-bottom: 4px;
                padding: 16px 48px;
            }
        </style>
    </head>
    <body>
    <div class="form">
        <div>
            <span class="label">用户名</span>
            <span class="txt"><input type="text" placeholder="6-20个字符"/></span>
        </div>
        <div style="clear: both"></div>
        <div>
            <span class="label">密码</span>
            <span class="txt"><input type="password" placeholder="6-20个字符" class="formErr"/></span>
        </div>
        <div style="clear: both"></div>
        <div>
            <span class="label">重复密码</span>
            <span class="txt"><input type="password" placeholder="再次输入密码"/></span>
        </div>
        <div style="clear: both"></div>
        <div class="errTips">
            <ul>
                <li>密码长度不能小于6个字符!</li>
                <li>密码不能为空!</li>
                <li>两次密码输入不一致!</li>
            </ul>
        </div>
        <div style="clear: both"></div>
        <div>
            <span class="label"></span>
            <span class="txt"><button>提交</button></span>
        </div>
        <div style="clear: both"></div>
    </div>
    </body>
    </html>
    展开全文
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...meta name="viewport" content="width=device-width, initial-scale=1.0">...Do.
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        /* 表示给禁用的input添加样式 */
        input:disabled{ 
            background-color: red;
        }
        /* 表示给没有禁用的input添加样式 */
        input:enabled{
            background-color: green;
        }
        /* 表示给选中的input紧挨着的兄弟元素设置样式 */
        input:checked+label{
            color: pink;
        }
        /* 表示给必填的元素设置样式 */
        input:required{
            border: 9px double darkblue;
        }
        /* 表示给非必填元素设置样式 */
        input:optional{
            border: 5px solid yellow;
        }】
        /* 表示带有email的input的元素在生效后的样式 */
        input[email]:valid{
            background-color: #569;
        }
        /* 表示带有email的input的元素在失效后的样式 */
        input[email]:invalid{
            background-color: lightcoral;
        }
    </style>
    <body>
        <form action="">
            <input type="text" disabled> <!--disabled表示这个input被禁用-->
            <input type="text">
            <input type="text" required> <!--required表示这个input在这个form表单中时必填的元素-->
            <input type="email" email>  <!--表示这个input的类型是email类型-->
            <hr>
            <input type="radio" name="sex" id="body">
            <label for="boy">男</label>
            <input type="radio" name="sex" id="gril">
            <label for="gril">女</label>
            <hr>
    
            <button>提交 </button>
        </form>
    </body>
    </html>
    

    效果演示如下:

     

    展开全文
  • https://www.zhihu.com/video/1243668780129435648 每日测验 """ 答案 1. ascii:8位一个字节,1个字节表示一个字符....验证form表单提交数据 # 接下来的框架代码无需掌握 看一下效果即可 总结 1. 作业 今日作业
    5308edc4e39eb3b70d0dd0d8a1e32e7f.png
    https://www.zhihu.com/video/1243668780129435648

    每日测验

    """
    

    答案

    1.
    ascii:8位一个字节,1个字节表示一个字符.即: 2 ** 8 = 256,所以ASCII码最多只能表示256个字符.只有英文和一些符号
    unicode:俗称万国码,把所有的语言统一到一个编码里.解决了ascii码的限制以及乱码的问题.unicode码一般是用两个字节表示一个字符,特别生僻的用四个字节表示一个字符.
    utf-8:它是一个"可变长的编码方式",如果是英文字符,则采用ascii编码,占用一个字节.如果是常用汉字,就占用三个字节,如果是生僻的字就占用4~6个字节.
    gbk:国内版本,一个中文字符 == 两个字节 英文是一个字节
    
    2.Ⅰ:m,n = n,m
    Ⅱ:
    x = m
    m = n
    n = x
    
    3.浅拷贝(shallow copy):只复制指向某个对象的指针,而不复制对象本身,新旧对象共享一块内存;
      深拷贝(deep copy):复制并创建一个一摸一样的对象,不共享内存,修改新对象,旧对象保持不变。
    
    4.HTTP协议:
    基于TCP/IP协议作用于应用层的协议,基于请求响应,无状态无连接的协议
    
    5.<h1> <p> <div> <span> <b> <s> <i> <u> <img> <a> <table> <form> <select> <input>

    昨日内容回顾

    • Web的本质
    浏览器
    服务端
    文件(html文件)
    • HTTP协议
    HTTP协议的由来(sql语句由来)
    	浏览器只有一个如何兼容N多个服务端
    
    # 四大特性
      1 基于请求响应
      2 基于TCP/IP作用于应用层之上的协议
      3 无状态
      	无论来多少次 都待你如初见
       	如何做到保存用户状态???
        	cookie、session、token
      4 无/短链接
      	请求来我响应你 之后就没有联系了
        长链接:websocket(群聊功能、服务端主动给客户端发送消息)
    
    # 请求数据格式
      请求首行(HTTP协议的版本,当前请求方式)
      请求头(一大堆k,v键值对)
      
      请求体(并不是所有的请求方式都有请求体,get没有post有)
      
    # 响应数据格式
      响应首行(HTTP协议的版本,响应状态码)
      响应头(一大堆k,v键值对)
      
      响应体(浏览器展示给用户看的内容)
     
    # URL
    	统一资源定位符 类似于坐标
    # 请求方式
    	1.get请求
      	朝别人要数据(也是可以携带参数的,只不过参数不是放在请求体里面的,而是直接放在url的后面)
      	url?username=jason&password=123
      2.post请求
      	朝别人提交数据
    
    # 响应状态码
    # 用简短的数字来表示一大串提示性信息
    1XX:服务端已经成功接收到了你的数据 正在处理你可以继续提交
    2XX:请求成功(200 OK)
    3XX:重定向(你想访问A页面但是给你调到了B页面)
    4XX:请求错误(404请求资源不存在、403请求不符合条件)
    5XX:服务端内部错误(500)
    ps:上述的状态码是HTTP协议规定的,其实到了公司之后每个公司还会自己定制自己的状态及提示信息
      	公司A
        	1000:
          1001:
          1002:
        公司B
        	2001:
          2002:
          2003:
          ...
    • HTML
    超文本标记语言(你在学习它的时候只需要记忆每个标签表示什么意思即可)
    书写网页的一套标准
    	除了HTML可以书写前端页面之外
    	还有XML也可以书写前端页面 
    		odoo框架内部的前端页面全部是用XML书写
    			公司内部管理软件 ERP
    
    
    # 注释  <!--注释-->
    
    # 文档结构
    <html>
    	<head></head>:都不是给用户看的 主要是给浏览器看的一些配置信息
      <body></body>:body书写的所有的内容 都是给用户看的
    </html>
    • head内常用标签
    • body内基本标签
    h1~h6 标题标签
    p段落标签
    u i b s
    hr
    br
    
    
    # 特殊符号
    空格  &nbsp;
    大于	&gt;
    小于  &lt;
    &amp;
    &reg;
    &copy;
    &yen;

    # 特殊符号 空格 大于 > 小于 < & ® © ¥ ```

    • 常用标签
    div:网页初期划定区域范围
    span:划定文本的
    
    
    # a标签
    	链接标签
      	<a href='' target=''></a>
        	href
          	1.可以放一个url点击自动跳转
            2.还可以放其他标签的id值 锚点功能
          
          target
          	控制是否在当前页跳转
            	_self
              _blank
    # img标签
    	图片标签
      	<img src='' alt='' title='' height='' width=''/>
        	src
          	1.可以放图片的路径 本地或者线上
            2.还可以放一个url 会自动朝该url提交get请求获取图片数据展示(暂时不考虑)
          
          alt
          	图片加载不出来的时候	展示的提示信息
           
         	title
          	鼠标悬浮在图片上之后展示的提醒信息
          
          height、width
          	单独调整某一个 另外一个会自动等比例缩放
            如果两个都调整了 可能会出现图片的失真
     
    # 标签一般情况下都需要有两个重要的属性
    	id值
      	唯一标示  同一个页面不能有重复	
      class值	
        类似于类的继承 可以有多个  
    • 标签的分类
    分类1:
    	双标签
    		<h1></h1>
    	单标签
    		<img/>
    	
    分类2:
    	块儿级标签:独占一行  可以设置长宽
    		div p
    		注意:块儿级标签内部可以嵌套任意的行内标签和块儿级标签
    			但是p标签只能嵌套行内标签
    	行内标签:自身文本多大就占多大  不能设置长宽
    		span a img
    	
    	PS:上述的规定只是HTML书写规范 如果你不遵循 不会报错
    	浏览器会自动帮你解除嵌套关系
    • 列表标签
    ul
    	li
    页面上只要是带有规则的排序文字 一般用的都是无序列表	
    
    ol
    	li
    有序列表
    
    dl
    	dt
      dd
    标题列表	

    今日内容概要

    • 表格标签(只要是展示数据 一般都可以使用表格标签)
    • 表单标签(重要:获取前端用户数据发送给后端)
    • 偷窥一下后端框架的基本使用(flask)
    • css层贴样式表(选择器)

    表格标签

    id 

    表单标签

    # 能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
    
    

    验证form表单提交数据

    # 接下来的框架代码无需掌握  看一下效果即可
    

    总结

    1.

    作业

    今日作业
    
    展开全文
  • 而对于设计一个表单组件来说,主要需要考虑以下三点:各个元素如何排版布局管理各个元素的值表单验证(即时校验及提交的全部校验)目前已经有了一批优秀的 form 表单解决方案,但是要解决上述的三大问题,都比较费劲,...
  • form表单样式自定义

    千次阅读 2019-01-25 17:05:00
    .form-group>input[type="password"]:focus { color: #495057; border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25); } input[type='radio'], input[type='checkbox'] { ...
  • css form表单样式清除

    2017-03-27 14:43:00
    css form表单样式清除 开发项目中表单常用的清楚样式: 1、改变placeholder默认字体颜色 ::-webkit-input-placeholder{color: #333;} :-moz-placeholder{color: #333;} :-moz-placeholder{...
  • css如何清除form表单样式的示例开发项目中表单常用的清楚样式:改变placeholder默认字体颜色 -webkit-input-placeholder{color: #333;} -moz-placeholder{color: #333;} -moz-placeholder{color: #333;} -ms-input-...
  • form表单样式案例

    千次阅读 2017-09-06 22:05:53
    <p class="p2"> 你喜欢这个表单吗? <img src="img/line.png" width="220px"></p>  喜欢 不喜欢 <p class="p2"> 你喜欢什么运动? <img src="img/line.png" width="245px"></p> 足球 篮球 篮球 ...
  • 删除下边框 ...u-form :model="form" ref="uForm" :error-type="['toast']" label-width="160" :border-bottom="false" label-position="left"> <u-form-item label="收货人" prop="name" :bor..
  • 精美form表单css样式

    千次阅读 2021-06-10 09:14:23
    css如何清除form表单样式的示例开发项目中表单常用的清楚样式:改变placeholder默认字体颜色 -webkit-input-placeholder{color: #333;} -moz-placeholder{color: #333;} -moz-placeholder{color: #333;} -ms-input-...
  • 关于Form表单的美化,能比较方便、比较简单的加入到你的UI中,主要美化的内容有select radio checkbox 等,能够使你的UI更加漂亮美观,并能够自己定制样式
  • element-ui的form表单样式改动

    千次阅读 2018-08-14 15:05:00
    造成下面样式错乱是下面自带的css样式,原本打算通过样式...后来把写在这个表单的el-form的login-form的类名删掉(这个类名删掉对我其他视图没有影响,经过搜索),则这种情况解决。 因为只有el-form-item_conte...
  • 一、基础表单 <form > <div class=form-group> 邮箱: <input type=email class=form-control placeholder=请输入您的邮箱地址> <div class=form-group> 密码 <input type=password class...
  • 带背景Form注册表单HTML模板是一款Step Registration Form注册表单html模板下载。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。
  • 效果图如下: 因为是以弹框形式出现,所以外层包了dialog ...el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="250px" class="form"> <el-form-item label="基本户开户名">
  • django修改form表单样式css

    千次阅读 2020-03-16 10:10:02
    可以使用django自身的渲染模板,但是没有现在前端框架渲染出来的好看,所以我们使用attrs参数,代码如下: 本文目录编写表单类视图处理模板使用 ...class TaskForm(forms.Form): task_domain = forms.CharF...
  • vue使用elementUI form表单label样式修改

    千次阅读 2021-10-06 17:38:00
    更多关于修改ElementUI样式的方法,可以参考这篇文章 ...2.在对应el-form-item的label属性中加入class样式 <el-form-item label="用户名" class="item"> <el-input v-model="ruleForm.usernam..
  • 表单formType 为 submit 的<button/>组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。 属性名 类型 说明 report-submit Boolean 是否返回formId用于发送模板...
  • Form表单中的各种样式

    千次阅读 2018-04-13 23:45:38
    很多时候,我们仅仅为了实现数据采集这个功能来使用表单,常看到的... 1、CSS魔法CSS,就是大家知道的层叠样式单,它可以定义页面元素的外观,包括字体样式、背景颜色和图像样式、边框样式、补白样式、边界样式等...
  • 修改element里form样式

    千次阅读 2020-08-18 10:07:26
    1.改变表单中的某项label的样式 在assets文件夹下新建myform.css文件 .itemlabel .el-form-item__label{ font-size:22px; } 在main.js全局引入myform.css文件 //导入myform样式 import './assets/css/myform.css' ...
  • Yii2 Form表单样式修改

    千次阅读 2017-08-11 07:39:01
    以下为主要的样式修改的代码,大家可以看着修改。如需要修改类而不是样式,只需要替换style为...$form = ActiveForm::begin(['action' => ['site/login'], 'method' => 'post']);?> 'width:255px;min-height:
  • html中如何设置form大小首先打开hbuilder编辑器,新建一个html文件,写一个form表单,并设置class属性值,form中设置两个input标签: 不要随便遇到一个人就对他掏心掏肺的,在你看来,他是朋友,在他看来,你是个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 97,071
精华内容 38,828
关键字:

form表单样式