HTML5表单与媒体查询-优快云博客

在html5当中新增了很多的表单元素属性，这些属性使得我们开发人员在开发移动应用的时候更快，更方便。

常用的表单属性

form属性

<form id="formtest" action="formServlet" method="post">
        <input type="text" name="name">
        <input type="submit" value="submit">
 </form>
 <input type="text" name="pass" form="formtest">

上面代码中，我们在form表单外部同样存在一个input的输入框，这个输入框和form表单是兄弟元素，在html4中，所有需要提交的元素都必须位于form表单当中，然而，在html5中，只需要为表单元素添加id值，并且在该表单外部的元素中使用form属性指定即可
ps: 该效果需要在支持html5属性的浏览器中运行。

placeholder属性

placeholder属性的主要作用是当文本处于并未输入的状态并且内容为空的时候给出文本框的提示：

<input type="text" name="name" placeholder="请输入用户名">

autofocus属性

autofocus属性用于指定当前控件自动获得焦点。

<input type="text" name="name" placeholder="请输入用户名"  autofocus="autofocus">

required属性

required属性用来表明表单中的该元素在提交之前必须要有值，否则不能提交

 <input type="text" name="pass" form="formtest" required="required">

在google浏览器下的效果如下：
这里写图片描述

html5移动表单类型

<input type="email" name="email" placeholder="邮箱">
<input type="url" name="url" placeholder="url">
<input type="tel" name="tel"placeholder="电话">
<input type="number" name="number" placeholder="数字">
<input type="date" name="date" placeholder="日期">
<input type="time" name="time" placeholder="时间">
<input type="datetime" name="datetime" placeholder="datatime">
<input type="month" name="month" placeholder="月份">
<input type="range" min="30" max="50" placeholder="范围">

Media Query移动设备样式

什么是媒体查询，就是根据css3会根据当前的设备屏幕大小加载指定的css样式文件。这样，只需要维护一套页面代码，就可以在不同的设别，包括PC，以及移动端都可以适配。

使用viewport

viewport的主要作用是设置web页面适应移动设备的屏幕大小，在meta元素中定义，如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

width=device-width 指定当前虚拟窗口大小为屏幕大小
initial-scale=1.0 指定初始缩放比例
maximum-scale=1.0 指定允许用户缩放的最大比例
minimum-scale=1.0 指定允许用户缩放的最小比例
user-scalable=no” 指定是否允许用户手动缩放

Media Queries语法总结

Media Queries的语法如下所示：
必须以@media开头

@media [media_query] media_type and media_feature

其中：
media_query表示需要过滤查询的关键字，可以使用not和only，如下：

@media not screen and (min-width:480px)
@media only screen and (min-width:480px)

<!--
    max-device-width:表示设备的实际分辨率
    240px的宽度
-->
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

<!--
    大于240px，小于360px的宽度
-->
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />

<!--
    大于360px，小于480px的宽度
-->
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

<!--
    在纵向(portrait)时采用portrait.css来渲染页面
-->
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" /> 

<!--
    在横向（landscape）时采用landscape.css来渲染页面
-->
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"  type="text/css" />

<!--
    另外还有使用逗号（，）被用来表示并列或者表示或，下面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。
-->
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

媒体查询demo

下面我简单的写一个简单的关于媒体查询的demo：

在css中使用媒体查询

新建view_port.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="high.css">
</head>
<body>

</body>
</html>

这里我只是引入了一个high.css文件
high.css

* {
    margin: 0;
    padding: 0;
}

@media (min-width: 200px) {
    body{
        background-color: #ff0000;
    }    
}

@media (min-width: 800px) {
    body{
        background-color: #00ffff;
    }  
}

@media (min-width: 1024px) {
  body{
        background-color: #f98767;
    }  
}

@media (min-width: 1240px) {
 body{
        background-color: #985408;
    }  
}

在html内部嵌入媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <style type="text/css">
     * {
        margin: 0;
        padding: 0;
     }

    @media (min-width: 200px) {
        body{
            background-color: #ff0000;
         }    
     }

@media (min-width: 800px) {
    body{
        background-color: #00ffff;
    }  
}

@media (min-width: 1024px) {
  body{
        background-color: #f98767;
    }  
}

@media (min-width: 1240px) {
 body{
        background-color: #985408;
    }  
}
     <style>
</head>
<body>

</body>
</html>

通过link引入不同的css

link.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" media="screen and (min-width:400px)" href="small.css" type="text/css" />
    <link rel="stylesheet" media="screen and (min-width:600px) and (max-width:800px)" href="middle.css" type="text/css" />
    <link rel="stylesheet" media="screen and (min-width:1024px)" href="big.css" type="text/css" />
</head>
<body>

</body>
</html>

small.css

body{
        background-color: #ff0000;
}

middle.css

body{
        background-color: #00ff00;
}

big.css

body{
        background-color: #0000ff;
}

简单说明一下，这里的所有相同的样式都使用了@media关键字包住了，在指定的屏幕上使用指定的样式，这里比如”min-width: 200px”表示当屏幕的宽度小于200px的时候使用的样式。效果如下：
这里写图片描述

可以看到，已经实现了在不同的屏幕大小上加载不同的不同的样式属性值了。