原文

　　https://www.jianshu.com/p/b01f32844ac1

大纲

　　1、单选框多选框实现的商品选择
　　2、添加下拉框和删除下拉框
　　3、观察textarea中事件处理器的运行顺序
　　推荐

1、单选框多选框实现的商品选择

<html>

<head>

    <title>Test</title>

    <script>

        var radCpuSpeedIndex = 0;

        function radCPUSpeed_onclick(radIndex) {

            var returnValue = true;

            if (radIndex == 1) {

                returnValue = false;

                alert("Sorry that processor speed is currently unavailable");

                /**

                  Next line works around a bug in IE that doesn't cancel

                  the Default action properly

                */

                document.form1.radCPUSpeed[radCpuSpeedIndex].checked = true;

            } else {

                radCpuSpeedIndex = radIndex;

            }

            return returnValue;

        }

        function butCheck_onclick() {

            var controlIndex;

            var element;

            var numberOfControls = document.form1.length;

            var compSpec = "Your chosen processor speed is ";

            compSpec =

              compSpec + document.form1.radCPUSpeed[radCpuSpeedIndex].value;

            compSpec =

              compSpec + "\nWith the following additional components\n";

            for (controlIndex = 0; controlIndex < numberOfControls; controlIndex++) {

                element = document.form1[controlIndex];

                if (element.type == "checkbox") {

                    if (element.checked == true) {

                        compSpec = compSpec + element.value + "\n";

                    }

                }

            }

            alert(compSpec);

        }

    </script>

</head>

<body>

    <form name="form1">

        <p>Tick all of the components you want included on your computer </p>

        <br>

        <br>

        <table>

            <tr>

                <td>DVD-ROM</td>

                <td>

                    <input type="checkbox" name="cnkDVD" value="DVD-ROM">

                </td>

            </tr>

            <tr>

                <td>CD-ROM</td>

                <td>

                    <input type="checkbox" name="cnkCD" value="CD-ROM">

                </td>

            </tr>

            <tr>

                <td>ZIP-ROM</td>

                <td>

                    <input type="checkbox" name="cnkZIP" value="ZIP DRIVE">

                </td>

            </tr>

        </table>

        <p>Select the processor speed you require </p>

        <br>

        <br>

        <table>

            <tr>

                <td>

                    <input type="radio" name="radCPUSpeed" checked onclick="return radCPUSpeed_onclick(0)" value="3.8 GHz">

                </td>

                <td>3.8 GHz</td>

            </tr>

            <tr>

                <td>

                    <input type="radio" name="radCPUSpeed" checked onclick="return radCPUSpeed_onclick(1)" value="4.8 GHz">

                </td>

                <td>4.8 GHz</td>

            </tr>

            <tr>

                <td>

                    <input type="radio" name="radCPUSpeed" checked onclick="return radCPUSpeed_onclick(2)" value="6 GHz">

                </td>

                <td>6 GHz</td>

            </tr>

        </table>

        <input type="button" value="Check Form" name="butCheck" onclick="return butCheck_onclick()">

    </form>

</body>

</html>

2、添加下拉框和删除下拉框

<html>

<head>

<title>Test</title>

<script>

function butRemoveWeb_onclick(){

    if(document.form1.theDay.options[2].text == "Wednesday"){

        document.form1.theDay.options[2] = null;

    }else{

        alert("There is no Wednesday here!");

    }

    console.log(document.form1.theDay.selectedIndex);

}

function butAddWed_onclick(){

    if(document.form1.theDay.options[2].text != "Wednesday"){

        var indexCounter ;

        var days = document.form1.theDay;

        var lastoption = new Option();

        days.options[6] = lastoption;

        for(indexCounter = 6;indexCounter >2; indexCounter--){

            days.options[indexCounter].text = days.options[indexCounter -1].text;

            days.options[indexCounter].value = days.options[indexCounter -1].value;

        }

        var option = new Option("Wednesday",2);

        days.options[2] = option;

    }

    else{

        alert("Do you want to have TWO Wednesday????");

    }

    console.log(document.form1.theDay.selectedIndex);

}

</script>

</head>

<body>

<form name="form1">

    <select name=theDay size=5>

        <option value=0 selected>Monday

        <option value=1>Tuesday

        <option value=2>Wednesday

        <option value=3>Thursday

        <option value=4>Friday

        <option value=5>Saturday

        <option value=6>Sunday

    </select>

    <br>

    <input type="button" value="Remove Wednesday" name=butRemoveWeb onclick="butRemoveWeb_onclick()">

    <input type="button" value="Add Wednesday" name=butAddWeb onclick="butAddWed_onclick()">

</form>

</body>

</html>

3、观察textarea中事件处理器的运行顺序

<html>

<head>

<title>Test</title>

<script>

//观察textarea中事件处理器的运行顺序

function DisplayEvent(eventName){

    var myMessage = window.document.form1.textarea2.value;

    myMessage = myMessage + eventName;

    window.document.form1.textarea2.value = myMessage;

}

</script>

</head>

<body>

<form name="form1">

    <textarea rows=15 cols=40 name=textarea1

        onchange = "DisplayEvent('onchagen\n');"

        onkeydown = "DisplayEvent('onkeydown\n');"

        onkeypress = "DisplayEvent('onkeypress\n');"

        onkeyup = "DisplayEvent('onkeyup\n\n');"

    ></textarea>

    <textarea rows=15 cols=40 name=textarea2></textarea>

    <br><br>

    <input type="button" value="Clear Event TextArea"

        name=button1 onclick="window.document.form1.textarea2.value=''"

    >

</form>

</body>

</html>

推荐

　　在这里推荐两篇同样是我写的博客，一篇是详细的关于表单以及表单元素的知识点的文章Html表单元素及表单元素详解,还有一篇是我使用表单的过程中遇到的一些问题以及相应解释Html表单中遇到的问题，同样希望能对读者有所帮助。

Html表单使用实例的更多相关文章

  1. Bootstrap+PHP表单验证实例

    简单实用的Bootstrap+PHP表单验证实例,非常适合初学者及js不熟悉者,还有ajax远程验证 js验证表单 1 $(document).ready(function() { 2 $('#def ...

  2. jQuery-easyui和validate表单验证实例

    jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...

  3. 034——VUE中表单控件处理之使用vue控制radio表单的实例操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. jquery-4 完整表单验证实例

    jquery-4 完整表单验证实例 一.总结 一句话总结:在form的jquery对象中返回false即可终止表单提交. 1.验证的显示错误消息如何布局? 开始时隐藏,出现错误后显示 10 .erro ...

  5. React 表单元素实例

    代码实例: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...

  6. HTML5 web Form表单验证实例

    HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...

  7. 纯原生javascript下拉框表单美化实例教程

    html的表单有很强大的功能,在web早期的时候,表单是页面向服务器发起通信的主要渠道.但有些表单元素的样式没办法通过添加css样式来达到满意的效果,而且不同的浏览器之间设置的样式还存在兼容问题,比如 ...

  8. JavaScript表单验证实例

    1. 长度限制<script>function test(){if(document.a.b.value.length>50){alert("不能超过50个字符!" ...

  9. Yii 框架表单验证---实例

  10. angular表单验证实例----可用的代码

    前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ...

随机推荐

  1. 小米开源文件管理器MiCodeFileExplorer-源码研究(4)-文件操作工具类FileOperationHelper

    文件操作是非常通用的,注释都写在源代码中了,不多说~需要特别说明的是,任务的异步执行和IOperationProgressListener.拷贝和删除等操作,是比较费时的,采用了异步执行的方式~ An ...

  2. 【习题 8-15 UVA - 1617】Laptop

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 贪心. 把所有的区间按照右端点为第一关键字,左端点为第二关键字升序排. 然后令now = a[i].second. (now即当前的 ...

  3. 关于client浏览器界面文字内容溢出用省略号表示方法

    在实际的项目中,因为client浏览器文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其它标签,下同)区域的情况.此时比較好的做法就是当文字超过限定的div宽度后自己主动以省 ...

  4. wordpress 加速主题的静态资源

    wordpress 加速主题的静态资源(固定的CSS.JS和图片等) wordpress 中用函数 get_stylesheet_directory_uri() 生成当前主题的 URL , 格式如 h ...

  5. intent- 启动其他应用

    今天需要在图库中实现对相机的调用,代码如下 Intent intent = new Intent(Intent.ACTION_VIEW); ComponentName componetName = n ...

  6. 阿姆达尔定律（Amdahl's law）

    首先给出阿姆达尔定律的数学公式描述: S(N)=1(1−p)+pN p:程序中可并行部分的程序在单核上执行时间的占比: N:处理器的数目(总的核心数) S(N):程序在 N 个处理器(总核心数)相对在 ...

  7. 轻松学习Linux之用户账户管理及实例

    Linux用户管理基础 (下载清晰视频:http://down.51cto.com/data/158699) 轻松学习Linux之用户账户管理的实例-跨硬盘移动数据 (此处视频不清楚下按下面地址下载清 ...

  8. golang webservice[ json Martini webframe]

    golang webservice[ json Martini webframe] https://github.com/brunoga/go-webservice-sample 自己修改了一下例子, ...

  9. Vue的全选功能实现思路

    全选功能的实现主要分两步: 1. 点击全选框选中所有选择框. 2. 当所有选择框都被选中时,勾选全选框. 详细思路: 1. 点击全选框选中所有选择框: 给全选框绑定一个值,然后添加change时间,当 ...

  10. BZOJ2002: [Hnoi2010]Bounce 弹飞绵羊（LCT）

    Description 某天,Lostmonkey发明了一种超级弹力装置,为了在 他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置,每个装 ...