欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:澳门赌球网 > HTML5 >

HTML5新增标签元素讲解

 

1.新增表单元素:

Input  type=XXX

Email 邮箱: 提示格式不正确

url   地址  :地址格式:http://www.....

Number:数值型 

属性:min 最小  max最大

Range: 范围内数字的输入域  滑动条 了解

Date 日期选择器

Tel :电话号码的输入框

Color: 选色器

2.新增表单属性:

autocomplete 属性规定 form input 域应该拥有自动完成功能。  on  打开 off 关闭。

表单提示框autofocus 属性规定在页面加载时,域自动地获得焦点。autofocus="autofocus"  页面上只有一个

formaction - 重写表单的 action 属性  重定向表单提交  控制表单数据提交时候,提交到那个页面进行数据处理

formmethod - 重写表单的 method 属性

image类型的input元素的宽度和高度

height:

width:

list: 属性规定输入域的 datalist

解释:关联选项  input-à关联成下拉列表  datalist      list=”val”   =è datalist  id=”val”

  Datalist 所有选项必须 option

  Label 提示

  Value  下拉列表中出现的值

required 属性规定必须在提交之前填写输入域(不能为空)。 必填项  可以用在所有的input 类型的元素上。

案例:

用户登录界面效果图

 

Css代码

@charset "utf-8";

/* CSS Document */

*{ margin:0px;padding:0px;}

ul,li{ list-style:none;}

a{ text-decoration:none;}

header{

      border:0px solid #ff0000;

      width:90%;

      height:80px;

      margin:0 auto;

      font-size:50px;

      background-color:#E9F8FE;

      text-align:center;

      line-height:80px;

}

nav{

      width:90%;

      height:30px;

      margin:20px auto;

      border:0px solid #ff0000;

      background-color:#8CCFF0; 

}

nav ul{ padding-left:30px;}

nav ul li{

      width:80px;

      float:left;

      line-height:30px;

      font-weight:bold;    

}

nav ul li a:hover{ color:#F00;}

 

section{

      height:600px;

      width:90%;

      border:1px solid #CCC;

      margin:0 auto;  

}

aside{

     width:20%;

      float:left;

      height:600px;

      border-right:1px solid #ccc; 

}

aside ul{

      border:0px solid #00ff00;

      height:400px;   

}

aside ul li a{

      color:#000;

      line-height:40px;

      border-bottom:1px solid #ccc;

      text-align:center;

      display:block;   

}

form{

     width:75%;

      float:left;

      margin-left:10px;    

      padding-left:30px;

      padding-top:20px;

}

form p{ line-height:30px;}

 

footer{

      width:90%;

      height:100px;

      text-align:center;

      margin-top:20px;    

}

 

 

 

 

 

 

 

 

 

 

 

 

 

Html代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<link rel="stylesheet" href="css/style.css">

</head>

<body>

<header>

      XXX科技有限公司出品

</header>

<nav>

      <ul>

          <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>

          <li><a href="#">关于我们</a></li>

          <li><a href="#">产品介绍</a></li>

          <li><a href="#">联系我们</a></li>

    </ul>

</nav>

<section>

      <aside>

        <ul>

            <li><a href="#">客服中心</a></li>

            <li><a href="#">用户中心</a></li>

            <li><a href="#">产品中心</a></li>

            <li><a href="#">反馈中心</a></li>

        </ul>

    </aside>

      <form action="1.html">

          <p>用户名<input type="text" name="uName"></p>

          <p>邮箱<input type="email" name="uEmail"></p>

          <p>

              性别<input type="text" list="uSex" name="sex">

               <datalist id="uSex">

                 <option value=""></option>

                 <option value=""></option>

             </datalist>

        </p>

          <p>手机<input type="tel" name="uTel"></p>

          <p><input type="submit" value="注册"></p>

    </form>

</section>

<footer>

      ICP111111111 地址:XXXXXX

</footer>

</body>

</html>

 

 

如需转载,请注明文章出处和来源网址:http://www.jiuyinet.com/html5/h13296.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
澳门赌球网文章修订日期:2016-10-19 12:06 原创:澳门赌球网
本文www.jiuyinet.com DIVCSS5版权所有。