html应用例子,Html表单使用实例

大纲

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

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

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

推荐

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

Test

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);

}

Tick all of the components you want included on your computer

DVD-ROM
CD-ROM
ZIP-ROM

Select the processor speed you require

	3.8 GHz
	4.8 GHz
	6 GHz

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

Test

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);

}

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

Sunday

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

Test

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

function DisplayEvent(eventName){

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

myMessage = myMessage + eventName;

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

}

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

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

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

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

>

name=button1 οnclick="window.document.form1.textarea2.value=''"

>

推荐

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