html表单知识

天怀

已于 2022-05-28 12:16:58 修改

阅读量92

点赞数

分类专栏：前端学习路线文章标签： html css 前端

于 2022-05-28 08:51:12 首次发布

本文链接：https://blog.csdn.net/qq_39165819/article/details/124944635

版权

前端学习路线专栏收录该内容

17 篇文章 0 订阅

订阅专栏

设置表单属性autocomplete="off/on"关闭自动填充表单，自己实现记住密码。

<form autocomplete="off" method=".." action="..">

在这里插入图片描述

html5 如何设置表单必填，required
页面刷新时候聚焦
在这里插入图片描述

html5表单验证如何使用正则 pattern
html5表单中设置了必填，提交表单的时候怎么做
novalidate或者
按钮不空可以提交formnovalidate
在这里插入图片描述
利用正则表达式设置输入input框中的样式
5个数字后跟一个从imooc里任意一个字母

2.validity属性
使用方式
在这里插入图片描述

一些css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            max-width: 400px;
            margin: 20px auto;
        }
        input,option,textarea,select{
            width: 240px;
            margin: 10px 0;
            border: 1px solid #999;
            padding: 0.5em 1em;
        }

        label{
            color: #999;
            margin-left: 10px;
        }
        input:required,textarea:required{
            border-right: 2px solid #aa0088;
        }
        input:optional,select:optional{
            border-right: 3px solid #999;
        }
        /*设置伪元素必须要填content属性：after代表在元素后：before：代表在元素前*/
        input:optional +label::after{
            content: "必填";
        }
        input:required +label::after{
            content: "必填";
        }
        /*focus点击哪个内容会聚焦到该内容的值*/
        input:required:focus{
            outline: aqua dotted;
        }
        input[type="submit"]:hover{
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div class="content">
        <form action="#">
<!--            required必填-->
            <input required> <label>名称</label>
            <input required> <label>专业</label>
            <input > <label>信息</label>
            <input > <label>工程</label>
            <select name="#">
                <option value="1">非必填项一</option>
                <option value="1">非必填项二</option>
                <option value="1">非必填项三</option>
                <option value="1">非必填项四</option>
            </select>
            <textarea placeholder="留言（必填）" required>留言必填</textarea>
            <input type="submit" value="提交表单">
        </form>
    </div>
</body>
</html>

样式效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  .container{
    margin: 100px;
    /*relative相对定位 使用relative定位的元素，其相对的是自身进行偏移*/
    position: relative;
  }
  input{
    border:1px solid #999;
    /*四个边框不设置效果*/
    outline: 0;
    width: 140px;
    height: 30px;
    line-height: 30px;
    /*首行缩进*/
    text-indent: 36px;
    transition: all .3s;
    border-radius: 4px;
  }
  span.title{
    position: absolute;
    line-height: 30px;
    height: 30px;
    left: 2px;
    top: 2px;
    transition: all .3s;
  }
  input:focus,input:hover{
    /*字符缩减*/
    text-indent: 2px;
  }
  input:focus +span.title,input:hover +span.title{
    transform: translateX(-120%);
  }
  /*valid 符合验证要求的赋予样式*/
  input:valid ~label::after{
    /*设置行内元素*/
    content: "输入的数据符合内容";
  }
  input:invalid ~label::after{
  /*  设置行内元素*/
    content: "输入的数据不符合";
  }
  input:invalid{
    background: beige;
  }
  input:valid{
    background: darkorange;
  }
</style>
<body>
  <div class="container">
    <input id="mail" type="email" required placeholder="输入邮箱">
    <span class="title">邮箱</span>
    <label for="mail"></label>
  </div>
</body>
</html>

在这里插入图片描述

天怀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html表单知识

设置表单属性autocomplete="off/on"关闭自动填充表单，自己实现记住密码。<form autocomplete="off" method=".." action="..">html5 如何设置表单必填，required页面刷新时候聚焦html5表单验证如何使用正则 patternhtml5表单中设置了必填，提交表单的时候怎么做novalidate或者按钮不空可以提交formnovalidate利用正则表达式设置输入input框中的样式5个数字后跟一个从i
复制链接

扫一扫

专栏目录