HTML5中常用表单整理

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

  • 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 用的比较多

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 228,363评论 6赞 532
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 98,497评论 3赞 416
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 176,305评论 0赞 374
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 62,962评论 1赞 311
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 71,727评论 6赞 410
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 55,193评论 1赞 324
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 43,257评论 3赞 441
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 42,411评论 0赞 288
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 48,945评论 1赞 335
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 40,777评论 3赞 354
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 42,978评论 1赞 369
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 38,519评论 5赞 359
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 44,216评论 3赞 347
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 34,642评论 0赞 26
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 35,878评论 1赞 286
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 51,657评论 3赞 391
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 47,960评论 2赞 373

推荐阅读更多精彩内容

  • Javascript中的Form表单知识点总结
    本人做php的,最近发现JS真的是博大精深啊,比PHP难.在HTML中，表单是由form元素来表示的，但是在jav...
    linfree阅读 2,188评论 3赞 17
  • JS表单脚本
    表单基础知识 在HTML中，表单是由 元素来表示的，而在JS中，表单对应的则是HTMLFormElement类型。...
    oWSQo阅读 916评论 0赞 1
  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,782评论 18赞 139
  • 语2
    今天依然是抵抗情绪占上风。 下午才慢慢回归正常。 这样，碰到大事，都不知道褂几回了。 可能也和自己故意放任自己这样...
    duoduo_four阅读 146评论 0赞 1
  • 一件小事
    喜欢一年四季这棵树的模样 不是因为它一年四季都长成我喜欢的样子 而是一年四季不论它是如何光景 我都喜欢它
    高玉玲阅读 219评论 0赞 0