Html表单使用实例

原文

　　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表单中遇到的问题，同样希望能对读者有所帮助。