下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:HTML5自带验证美化

作者:陈莺莺呀     来源: https://www.cnblogs.com/chenyingying0/archive/2020/03/09/124点击数:1423发布时间: 2020-03-14 11:37:29

标签: cssHTML5

Web开发

  类(Class)是面向对象程序设计(OOP,Object-OrientedProgramming)实现信息封装的基础。类是一种用户定义类型,也称类类型。每个类包含数据说明和一组操作数据或传递消息的函数。类的实例称为对象。

  常用的伪类和css选择器:

  :required:optional必填元素和选填元素

  :in-range:out-of-range在范围之内和不在范围之内

  :valid:invalid符合要求的和不符合要求的

  :read-only:read-write只读和可读可写

  (:read-write除了匹配表单中可写的元素,也可以匹配div中可编辑可写入的元素)

  <divcontenteditable="true"></div>

  required和optional美化表单案例

  <!DOCTYPEhtml>

  <htmllang="en">

  <head>

  <metacharset="UTF-8">

  <title>form</title>

  <style>

  .container{max-width:400px;margin:20pxauto;}

  input,select,textarea{width:240px;border:1pxsolid#999;margin:10pxauto;padding:.5em1em;}

  label{color:#999;margin-left:10px;}

  input:required,textarea:required{

  border-right:3pxsolid#aa0088;

  }

  input:optional,select:optional{

  border-right:3pxsolid#999;

  }

  input:required+label::after{

  content:"(必填)";

  }

  input:optional+label::after{

  content:"(选填)";

  }

  input:focus,textarea:focus,select:focus{outline:0;}/*去掉选中时的蓝色外边框*/

  input:required:focus,textarea:required:focus{box-shadow:003px1px#aa0088;}

  input:optional:focus,select:optional:focus{box-shadow:003px1px#999;}

  input[type=submit]{

  background:#cc00aa;

  color:#fff;

  border:2pxsolid#aa0088;

  padding:10px0;

  }

  input[type=submit]:hover{

  background:#aa0088;

  }

  </style>

  </head>

  <body>

  <divclass="container">

  <formaction="#">

  <inputtype="text"required><label>名称</label>

  <inputtype="email"required><label>邮箱</label>

  <inputtype="tel"><label>手机</label>

  <inputtype="url"><label>网址</label>

  <selectname="#">

  <optionvalue="1">非必填选项一</option>

  <optionvalue="2">非必填选项二</option>

  <optionvalue="3">非必填选项三</option>

  <optionvalue="4">非必填选项四</option>

  </select>

  <textareaname="#"cols="30"rows="10"placeholder="留言(必填)"required></textarea>

  <inputtype="submit"value="提交表单">

  </form>

  </div>

  </body>

  </html>

  效果图如下:

web前端:HTML5自带验证美化_css_HTML5_类_课课家

  类的实质是一种数据类型,类似于int、char等基本类型,不同的是它是一种复杂的数据类型。因为它的本质是类型,而不是数据,所以不存在于内存中,不能被直接操作,只有被实例化为对象时,才会变得可操作。

赞(0)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程