HTML5中常用表单整理

2017-03-04 本文已影响0人史密斯_Du

在整理表单元素之前，首先要搞清楚表单都是干什么用的，用在哪里？为什么要用表单...

HTML 表单用于搜集不同类型的用户输入信息。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等；
当需要将数据提交至后台（服务器端）处理时，就可能需要通过部分表单的功能进行提交；

那就通过下文带大家初步进行一个了解（内含小Demo），可以照着敲写一番~

HTML中传统表单(常用)

from；//定义表单，所有表单的起点，from标签中有以下常用属性

action 属性：定义在提交表单时执行的动作。

Method 属性 :method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）

Name 属性:如果要正确地被提交，每个输入字段必须设置一个 name 属性。

input元素: input是最重要的表单元素，它有很多形态，根据不同的 type 属性。

text , radio , checkbox , button , submit , reset , file , password , hidden... ;

label:标记标签，有点类似于span标签；

下文会主要介绍input元素中常用的type属性及涉及的一些相关知识点：

1、 submit按钮有默认行为,如果我们不想使用跳转这样的行为需要阻止它的默认行为，同样的还有reset...
解决方案：

<from action="1.html">
    <input type="submit" value="点我啊" id="submit">
</from>
<script>
    var submit = document.getElementById('submit');
    submit.onclick = function (e) {
        e = e ||window.event;
        e.preventDefault ?e.preventDefault():e.returnValue = false;
    }
</script>

2、 input中的事件：
onblur ：‘ 失去焦点 ’；
onfocus ：‘ 获取焦点 ’ ；
onchange ：‘ 内容改变 ’；
onclick ： ‘ 点击 ’；
onkeydown ： ‘ 键盘按下 ’ ；
onkeyup ： ‘ 键盘抬起 ’；
onkeypress ： ‘ 键盘长按 ’；
autofocus ：自动获取光标；

3 、单选框 radio：

<!--实现点击男返回0，点击女返回1，未知返回2；-->
<input type="radio" name="sex" id="sexMan" value="0" checked/><label for="sexMan">男</label>
<input type="radio" name="sex" id="sexWoman" value="1"/><label for="sexWoman">女</label>
<input type="radio" name="sex" id="nosex" value="2"/><label for="nosex">未知</label>
<input type="submit" id="submit" value="点我啊"/>
<script>
    var submit = document.getElementById('submit');
    submit.onclick = function (e) {
        e = e || window.event;
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        //->性别的VALUE我们一般使用数字来代表男女，因为数字比汉字占用的内存小，也算是一个性能优化吧
        var sexList = document.getElementsByName('sex'),
            sexV = 0;
        for (var i = 0, len = sexList.length; i < len; i++) {
            var sexItem = sexList[i];
            if (sexItem.checked) {
                sexV = sexItem.value;
                break;
            }
        }
        console.log(sexV);
    }
</script>

4、多选框 checkbox

<!--实现全选反选功能和点击提交按钮，实现在控制台输出所选内容功能-->
<input type="button" value="全选" id="checkAll"/>
<input type="button" value="反选" id="checkConvert"/>
<input type="checkbox" name="hobby" value="吃饭" id="hobby_eat"/><label for="hobby_eat">吃饭</label>
<input type="checkbox" name="hobby" value="睡觉" id="hobby_sleep"/><label for="hobby_sleep">睡觉</label>
<input type="checkbox" name="hobby" value="打豆豆" id="hobby_playbean"/><label for="hobby_playbean">打豆豆</label>
<input type="submit" id="submit" value="点我啊!"/>
<script>
    var checkAll = document.getElementById('checkAll'),
            checkConvert = document.getElementById('checkConvert');
    var hobbyList = document.getElementsByName('hobby'),
            submit = document.getElementById('submit');
    checkAll.onclick = function () {
        for (var i = 0, len = hobbyList.length; i < len; i++) {
            hobbyList[i].checked = true;
        }
    };
    checkConvert.onclick = function () {
        for (var i = 0, len = hobbyList.length; i < len; i++) {
            var bobbyItem = hobbyList[i];
            //bobbyItem.checked ? bobbyItem.checked = false : bobbyItem.checked = true;
            bobbyItem.checked = !bobbyItem.checked;
        }
    };
    submit.onclick = function () {
        var ary = [];
        for (var i = 0, len = hobbyList.length; i < len; i++) {
            var hobbyItem = hobbyList[i];
            if (hobbyItem.checked) {
                ary.push(hobbyItem.value);
            }
        }
        console.log(ary.join('|'));
    }
</script>

5 、hidden ：代表一个 HTML 表单中的某个隐藏输入域

<!-- 实现点击提交后控制台输出hidden中value所存储的值-->
<input type="hidden" value="哈哈哈" id="tempInp"/>
<input type="submit" id="submit" value="点我啊!"/>
<script>
    //->我们在页面中需要获取和存储一些信息，但是这些信息还不想让用户看见，可以使用隐藏的文本框来处理，但是现在一般都不用了
    var submit = document.getElementById('submit'),
            tempInp = document.getElementById('tempInp');
    submit.onclick = function () {
        console.log(tempInp.value);
    }
</script>

6、文本域

<textarea name="" id="" style="width: 300px;height: 150px; resize: none;">
    <!--resize：none 禁止文本域的手动缩放-->
</textarea>
<!--http://ueditor.baidu.com/website/ ueditor百度编辑器(富文本编辑器) 他们的编辑区域不是使用文本域，而是使用contenteditable="true"设置一个非表单元素也能编辑-->

HTML中新表单

1、 HTML5中新增加的表单元素

input: serach , url , eamil , tel , number , range , color , date , time

progress : 进度条；

datalist : 二级下拉框；

ps ：新增加的表单元素在IE6~8下不兼容，而且没办法处理兼容(HTML5.MIN.JS是不能处理表单这个兼容的);

2 、 progress :标签标示任务的进度（进程）。

<!-- 末尾添加了定时器实现动态效果 -->
<progress max="100" value="0" id="progress"></progress>
<script>
    var count = 0;
    var timer = window.setInterval(function () {
        if (count >= 100) {
            window.clearInterval(timer);
            progress.value = 100;
            return;
        }
        count += 10;
        progress.value = count;
    }, 1000);
</script>

3 、模拟progress（项目中一般会自己写progress）：

<!-- CSS用到了linear-gradient和transition 低版本浏览器不兼容 -->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
        .box {
            position: relative;
            margin: 20px auto;
            width: 500px;
            height: 30px;
            border: 1px solid #F4F4F4;
        }
        .progress {
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background: -webkit-linear-gradient(top left, orange, green, cornflowerblue);
            background: -moz-linear-gradient(top left, orange, green, cornflowerblue);
            background: -ms-linear-gradient(top left, orange, green, cornflowerblue);
            background: -o-linear-gradient(top left, orange, green, cornflowerblue);
            background: linear-gradient(top left, orange, green, cornflowerblue);
            -webkit-transition: all .5s linear 0s;
            -moz-transition: all .5s linear 0s;
            -ms-transition: all .5s linear 0s;
            -o-transition: all .5s linear 0s;
            transition: all .5s linear 0s;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="progress" id="progress"></div>
</div>
<script>
    var count = 0;
    var timer = window.setInterval(function () {
        if (count >= 100) {
            window.clearInterval(timer);
            progress.style.width = count + '%';
            return;
        }
        count += 10;
        progress.style.width = count + '%';
    }, 500);
</script>
</body>

4、datalist

<!-- 输入苹果出现下拉提示信息 -->
<input type="text" id="search" list="searchList"/>
<datalist id="searchList">
    <option value="苹果">苹果</option>
    <option value="苹果手机">苹果手机</option>
    <option value="苹果电脑">苹果电脑</option>
    <option value="macbook">macbook</option>
</datalist>

5、color：颜色选择器

<style>
    html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
</style>
<input type="color" id="colorInp"/>
<script>
    colorInp.value = '#ffffff';
    colorInp.onchange = function () {
        document.body.style.backgroundColor = this.value;
    }
</script>

6、range：滑块控件

<input type="range" max="65" min="18" value="25" id="rangeInp"/>
<input type="number" value="25" style="width: 50px; text-align: center;" disabled id="ageInp"/>
<script>
    rangeInp.oninput = function () {
        ageInp.value = this.value;
    };
    //->oninput：相当于PC端的keydown、keyup事件，但是在移动端，由于键盘都是虚拟的，我们无法像PC端一样监听到键盘的触发(也就是不能使用keydown、keyup)，所以我们统一使用input事件来代替之前的事件 =>"当表单元素操作过程中触发这个事件"
</script>

7、email （邮箱，内置验证）

<input type="email" id="userEmail"/>
<span id="spanEmail">邮箱格式有错误!</span>
<script>
    userEmail.onblur = function () {
        console.log(this.checkValidity());//->内置验证：不输入内容是TRUE，输入格式错误为FALSE，输入正确为TRUR
    }
</script>

8、placeholder ( 输入框内提示内容，低版本浏览器不兼容)

<style>
    input {
        margin: 20px;
        padding: 0 5px;
        width: 300px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #000;
    }
</style>
<input type="email" placeholder="请输入邮箱!"/>

placeholder兼容性处理

<link rel="stylesheet" href="css/reset.min.css"/>
    <style>
        .inpBox {
            position: relative;
            margin: 20px auto;
            width: 300px;
            height: 30px;
        }

        .inpBox input, .inpBox span {
            padding: 0 5px;
            width: 288px;
            height: 28px;
            line-height: 28px;
            border: 1px solid green;
        }

        .inpBox span {
            display: none;
            position: absolute;
            top: 1px;
            left: 6px;
            z-index: 2;

            padding: 0;
            border: none;
            color: #ccc;
            cursor: text;
        }
    </style>
</head>
<body>
<div class="inpBox">
    <input type="text" id="userName" placeholder="请设置用户名"/>
    <span id="tipName">请设置用户名</span>
</div>
<script>
    if (window.navigator.userAgent.indexOf('MSIE') >= 0) {
        //->IE
        var tipName = document.getElementById('tipName'),
                userName = document.getElementById('userName');
        tipName.style.display = 'block';
        userName.placeholder = null;

        tipName.onclick = function () {
            userName.focus();
        };
        userName.onkeyup = userName.onkeydown = function () {
            var val = this.value;
            tipName.style.display = val.length === 0 ? 'block' : 'none';
        }
    }
</script>
</body>

（以下自行在浏览器中尝试..简单且不常用）

<input type="search"/><!--在手机上,有的手机会在文本框的末尾放一个搜索图标-->
<input type="url"/>
<input type="email">
<input type="tel">
<input type="number" min="18" max="65" value="25" step="1"/>
<input type="date" id="dateInp"/>
<input type="time"/>

新的表单元素的增加带来了什么样的作用?
1 方便我们的开发，新的元素提供很多强大的功能，例如:日历...
2 在移动端，我们使用INPUT新的类型，当用户输入的时候，手机会根据类型调取出最符合用户输入的虚拟键盘，例如:我们使用的是number类型，那么调取出来的就是数字键盘...
3 某些类型自带了表单验证
CSS:userEmail:valid{} #userEmail:invalid{}
JS: this.checkValidity()
4 提示属性:placeholder 用的比较多

那就先了解这么多，
以上，如有不明之处，欢迎问询~如有不妥之处，感谢指正！；

HTML5中常用表单整理

HTML中传统表单(常用)

HTML中新表单

猜你喜欢

热点阅读