精华内容
下载资源
问答
  • 前端表单样式
    千次阅读
    2021-02-01 10:49:30

    Element 表单样式调整

    在很多时候我们都会遇到调整各种前端样式的时候,今天就给大伙唠一唠这个 Element 表单调整 input 的方式之一

    可能会有人觉得,调个样式不就是去页面 F12 然后找一找对应 class 就行了吗?不就是写个行内样式给他用用就就好了么?等等等等…

    但是经过本人粗糙的测试,发现这些方式是不行滴,除非你可以挖到它底层的样式,然后进行覆盖,那样应该是可行的,不过有点小麻烦就是了

    好了,废话不多说!咱们直接上才艺!

    示例代码

    <template>
    	<div id="app">
          <el-form ref="loginForm" v-model="loginForm" :rules="loginRules" label-position="left">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="loginForm.username" placeholder="请输入用户名"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" placeholder="请输入密码" v-model="loginForm.password" show-password />
            </el-form-item>
          </el-form>
    	</div>
    </template>
    
    <script>
    
    export default {
      data() {
          return{
              loginForm:{
                  username: '',
                  password: ''
              }
          }
      }
    }
    </script>
    
    <style>
    
    </style>
    

    以上就是使用默认样式的,如果在标签里使用行内样式或者是添加class又或者是添加 id样式都是没得用的

    所以…

    使用 JS 改变 input 高度

    <template>
    	<div id="app">
          <el-form ref="loginForm" v-model="loginForm" :rules="loginRules" label-position="left">
            <el-form-item label="用户名" prop="username">
              <el-input id="name" v-model="loginForm.username" placeholder="请输入用户名"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input id="pass" type="password" placeholder="请输入密码" v-model="loginForm.password" show-password />
            </el-form-item>
          </el-form>
    	</div>
    </template>
    
    <script>
    
    export default {
      data() {
          return{
              loginForm:{
                  username: '',
                  password: ''
              }
          }
      },
      mounted() {
      	document.getElementById('name').style.height = '60px'
        document.getElementById('pass').style.height = '60px'
      }
    }
    </script>
    

    获取到对应 id 元素,然后进行对应调整

    (…本文仅供参考,希望对大家有所帮助!)

    更多相关内容
  • jQuery前端UI框架表单样式代码是一款表单集合可拆开使用样式可以自定义参数灵活特效。
  • 计算机前端-Web前端.DAY12-9-表单样式.avi
  • 本篇博客是对于表单元素的一些补充,主要针对于如何美化表单样式,学习了两种新的伪类选择器,扩张了重置样式表,并且给出了一种可以生成自己想要样式选择框的方法。

    【前端学习之HTML&CSS进阶篇】-- HTML第四篇 – 美化表单


    本文具体内容参考了B站渡一教育的课程,原课程链接如下:
    渡一教育课程

    lc

    前言

    html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言,在学习过程中,我们首先从html出发,在html的学习过程中深入了解css。
    在上一节博客中我们学习到了HTML中的表单元素,而对于表单元素来说,由于有着多种多样的按钮和选择界面,存在着很多的美化方法,让我们了一一了解一下。

    一、新的伪类

    1. focus

    在这里插入图片描述

    • 元素聚焦时的样式,类似于选中该区域;
      如文本框输入栏被聚焦时:
        :focus{
            outline: -webkit-focus-ring-color auto 5px;
            /* 谷歌浏览器的颜色、外边框样式自动、边框宽度(auto时无效) */
        }
    
    • 通过tab实现切换聚焦处,且切换的顺序可以通过tabindex属性切换:
        <!-- 默认情况下,tab切换顺序是按照源次序由上往下 -->
        <a tabindex="2" href="https://www.baidu.com/">百度</a>
        <input tabindex="1" type="text">
        <button tabindex="3" >提交</button>
    
    • 可以通过CSS将聚焦后样式去除/修改:
      效果如下:
      lc
        input:focus{
            /* outline: none; */
            outline: 1px solid #008c8c;
            outline-offset: 0;
            color: blueviolet;
        }
    

    2. checked

    在这里插入图片描述

    • 单选或多选框被选中的样式
      效果如下:
      在这里插入图片描述
        input:checked{
            /* 可替换元素,大部分样式不可修改,例如颜色 */
            background-color: #008c8c;
            /* 这里的背景颜色就没有用处了 */
        }
        /* +:选中下一个兄弟元素 */
        input:checked+label{
            background-color: #008c8c;
        } 
    

    二、常见用法

    1. 重置表单元素样式(可补充进自己保存的重置样式中)

        input,textarea,button,select{
    	    border: none;
        }
        input:focus,textarea:focus,button:focus,select:focus{
    	    outline: none;
    	    outline-offset: 0;
        }
    
    • 这里提供一种常见的表单样式
        /* 一种文本框输入样式 */
        input[type="text"], textarea, select {
            border: 1px solid #999;
        }
        input[type="text"]:focus textarea:focus select:focus{
            border: 1px solid #008c8c;
        }
        /* 一种button样式 */
        button{
            border: 2px solid #008c8c;
            border-radius: 5px;
        }
    

    2. 设置textarea是否允许调整尺寸

    • CSS样式:resize

    both:默认值,两个方向都可以调整尺寸
    none:两个方向都不可以调整尺寸
    horizonal:水平方向可以调整尺寸
    vertical:垂直方向可以调整尺寸

    3. 文本框边缘到内容的距离

        /* 调整边缘距离 */
        /* 方法1:padding */
        input{
            padding: 0 10px;
        }
        /* 方法2:text-indent,只有左侧 */
        input{
            text-indent: 1em;
        }
    

    4. 控制单选和多选的样式【重点】

    好看的选择框样式可见链接:选择框样式

    • 自行设计样式
        <div class="radio checked">
            <!-- fake radio -->
        </div>
    
        .radio{
            width: 12px;
            height: 12px;
            border: 1px solid #999;
            border-radius: 50%;
            cursor: pointer;
        }
        .radio.checked{
            border-color: #008c8c;
        }
        .radio.checked::after{
            content: "";
            display: block;
            width: 5px;
            height: 5px;
            background-color: #008c8c;
            margin-left: 3.5px;
            margin-top: 3.5px;
            border-radius: 50%;
        }
    

    注意:上面的操作只是把一个div变成了选择框的样式,并没有实际意义,需要下面的变换才行

    • 将实际的选择框变成自己的样式
      效果如下:
      在这里插入图片描述
        <p>
            请选择性别:
            <label class="radio-item">
                <input name="gender" type="radio">
                <!-- 这个span元素类似于之前的div,用于设置自己的选择框样式 -->
                <span class="radio"></span>
                <span></span>
            </label>
            <label class="radio-item">
                <input name="gender" type="radio">
                <span class="radio"></span>
                <span></span>
            </label>
        </p>
    
         /* 这里的样式与前相同,只不过把div变成span */
        .radio-item .radio{
            width: 12px;
            height: 12px;
            border: 1px solid #999;
            border-radius: 50%;
            cursor: pointer;
            display: inline-block;
        }
        /* 下面开始通过checked实现对后面本来无法选中的span进行选中 */
        /* 通过checked选取到聚焦位置的下一个元素,来设置样式 */
        .radio-item input:checked+.radio{
            border-color: #008c8c;
        }
        .radio-item input:checked+.radio::after{
            content: "";
            display: block;
            width: 5px;![在这里插入图片描述](https://img-blog.csdnimg.cn/797da0715da9478c9c01d0d706947663.webp?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55Sf5aaC5pit6K-p,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
    
            height: 5px;
            background-color: #008c8c;
            margin-left: 3.5px;
            margin-top: 3.5px;
            border-radius: 50%;
        }
        /* ~导致聚焦为止的后面所有span元素都被选中 */
        .radio-item input:checked~span{
            color: #008c8c;
        }
        /* 隐藏原有选择框 */
        .radio-item input[type="radio"]{
            display: none
        }
    

    总结

    本篇博客是对于表单元素的一些补充,主要针对于如何美化表单的样式,学习了两种新的伪类选择器,扩张了重置样式表,并且给出了一种可以生成自己想要样式选择框的方法,关于表单元素的进一步练习,将在下一篇博客中介绍,我们将会对B站的注册界面进行“copy”。

    在这里插入图片描述

    展开全文
  • from标签的具体使用:input标签使用示例:姓名: 用户名: 密码: 爱好:骑车游戏电影男女第一句:action标签的意思就是表单提交到服务器的链接地址,method标签,表明表单的提交方式为post响应格式第二句:指定一个姓名...

    1,from标签

    from标签的功能是向服务器传输数据,实现用户交互的重要标签。

    from标签的具体使用:

    input标签使用示例:

    姓名:

    用户名:

    密码:

    爱好:骑车游戏电影

    男女

    第一句:action标签的意思就是表单提交到服务器的链接地址,method标签,表明表单的提交方式为post响应格式

    第二句:指定一个姓名表格input标签,type表明该栏使用的格式为指定的“text”文本格式,name指定该栏传递的值为“username“

    第五句:checkbox标签的意思是多选框。

    最后一句:type类型为单选框,其后的name值为单选项值,指定为同样值。

    多级菜单标签:

    select标签操作

    河北省

    河南省

    山西省

    山东省

    name指定菜单的值,size指定可以默认显示几行数值,mutiple:是否可以复选

    optgroup是菜单中的分组,联合label标签指定分组名

    option显示每级菜单的值,value指定传输值

    selected标签在option标签中使用,显示此菜单项是否为多级菜单默认显示的值

    以下是网页示例:

    d51cbd667e444e38aac4dfc8fccce1c2.jpg

    提交表单按钮

    同样使用input标签,使用name指定值。

    提交表单按钮在表单最后使用,提交表单以上内容。

    css层叠样式表

    css规则有两个主要部分构成:选择器,一条或多条声明

    示例:

    }div{color:green;}

    使用方式为:标签名加上大括号,在大括号内添加属性值   属性:值

    css样式的四种引入方式

    行内式:

    用户注册

    行内式可以针对一行内容进行样式的设置,优点是可以针对性的进行显示一行样式,缺点是无法进行批量改变。

    嵌入式:

    嵌入式是在head网页头中输入样式,可以对便签进行批量操作

    Title

    }div{color:green;}

    此段示例内容针对标签p进行样式改变。

    链接式:

    可以把css样式内容写入到文件中,然后导入到html文件中使用,链接式的优点是一个样式可以导入到多个网页文件中,批量使用

    导入式:(了解)

    将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,

    @import"mystyle.css"; 此处要注意.css文件的路径

    导入式的缺点是网页在打开比较慢时,网页内容不会显示样式,直接显示网页内容原始样式,且导入式是最后才打开网页样式。

    展开全文
  • 前端表单插件.zip

    2019-10-23 12:57:38
    我将表单验证的所有插件包资源打包在一起上传,为了以后再有此需求时自己能找得到,有需要的也可以支持一下。 具体用法参照该博客:https://mp.csdn.net/mdeditor/102658565#
  • 在线效果:http://ynif.v099.10000net.cn/demo/biaodan/3/biaodan/index.html
  • 表单标签(重要:获取前端用户数据发送给后端) 偷窥一下后端框架的基本使用(flask) css层贴样式表(选择器) 表格标签 id 表单标签 # 能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器...
    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.

    作业

    今日作业
    
    展开全文
  • 泛微OA-E9流程表单前端接口API(V21)
  • 一、边框样式 1、整体样式: (1)属性:border-width定义宽度 border-style定义外观:none无样式、dashed虚线、solid实线 border-color定义颜色:取值“关键字”或“十六进制RGB值” (2)简写形式: div{...
  • 前端表单整理完整版

    2021-05-29 19:02:50
    前端基础.列表和表单 1. 列表标签(重点) 学习目标 理解 无序列表的应用场景 自定义列表的应用场景 应用 无序列表语法 自定义列表语法 问? 前面我们知道表格一般用于数据展示的,但是网页中还是有很多跟...
  • CSS学生档案表单样式代码,有姓名、手机号码、邮箱地址、所属学院、 入学成绩、基础水平、入学日期、毕业时间等表单录入框。
  • form表单样式

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

    2021-12-29 10:19:16
    下面是表单样式,校验各项是否为空,校验输入位数,校验email格式,校验两次输入密码是否相同。 下面是错误的提示: 值得注意的是,需要首先判断是否为空,在此基础上再去判断是否符合设置规则。 css...
  • 今天小编就为大家分享一篇使用layui前端框架弹出form表单以及提交的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 前端表单验证

    2021-04-02 14:05:56
    一、简概 因为,前端经常涉及到表单验证,故此篇博客用于记录前端JS对...前端表单代码 <div> <form method="get" action="https://www.baidu.com" id="form"> <table align="center" style="margin
  • 前端基础入门之css表格与表单

    千次阅读 2022-06-15 00:18:46
    3、表格的样式 HTML 代码 CSS 代码 其中,表单form 的属性注意:数据要提交到服务器中,必须要为元素指定一个属性值 密码框 提交按钮 单选框 像这种选择框,必须要措定一个属性,属性最终会作为用户填写的值传递...
  • 漂亮的css表单样式

    2010-08-02 17:42:47
    漂亮的表单样式,用css实现的,可以用在登录和注册页面上,需要的朋友就下载把,呵呵
  • --*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 使用CSS控制页面背景、表格、表单 能力目标 学会使用CSS控制表单 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 ...
  • 之前前端表单打印功能有使用过LODOP打印插件,需安装相应的LODOP的打印软件,lodop的使用方法2种。第一种方式是通过收集前端标签内容元素成对象 var htmlstr= $("#ECGReport").html(); 通过 LODOP.ADD_PRINT_HTM(20...
  • 经过前面的文章,相信大家已经基本了解了前端最基本的一些规则了: html搭建结构,承载内容 css则可以利用选择器,来为相应的html标签设置样式 前面提到过的样式有最基础的盒模型相关属性: 边框(border)以及...
  • 前端——Form表单

    万次阅读 2019-03-25 12:32:34
    表单相关的元素和属性 HTML使用表单向服务器提交请求,表单表单控件的主要作用就是收集用户输入,当用户提交表单时,用户输入内容将被作为请求参数提交到远程服务器。 一、Form元素 Form元素用于生成输入...
  • 前端schema表单配置生成方案

    千次阅读 2021-01-04 16:22:59
    表单Form开发,尤其在中台项目中,是FE????的家常便饭,一般需要大量的重复性工作????: • 编写模板 • 编写校验规则 • 表单提交(偶尔联动) 同时,Server也需要编写校验规则。然而,伴随业务变更和前后端开发...
  • 前端样式命名规范

    千次阅读 2019-03-25 10:32:26
    自定义样式加前缀.hpf 尽量用英文; 多个单词用中杠隔开(-); 尽量不缩写,除非一看就明白的单词,但不要太长。 二、CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, ...
  • 前端开发总结】表单操作系列

    千次阅读 2021-09-11 21:20:48
    文章目录(一)常用操作整理(1)Select标签操作1. 基础操作2. 添加/删除Select的Option项(2)多选框checkbox1. 常用操作...表单中的数据(二)动态组件和标签(1)动态调整标签组件位置样式1. jQuery语法——移动节点...
  • 基于vue的前端UI表单设计器

    千次阅读 2022-02-21 09:59:59
    在开发中,经常要做的就是各类表单的设计,如果不采用一些表单设计器,手写的话要很久,今天分享几个表单设计器。
  • 那么如何通过css实现取消浏览器自动填充表单的默认样式呢?解决方法一:当input文本框是纯色背景的,可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景;如:input...
  • 好看的表单HTML+CSS样式,可直接运行

    千次阅读 2020-10-16 10:31:52
    一个好看的表单 前端静态页面: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <style type="text/css"> /* Basic Grey *...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 65,160
精华内容 26,064
关键字:

前端表单样式