JavaScript中的form表单组件

代码演示


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<input type="text" id="Name"/>
		<input type="password" id="password"/>
		<textarea id="summary">textarea>
		<script>
			document.getElementById("Name").focus(); //设置光标
			function t1(){
				var element = document.getElementById("Name"); //获取id为Name的对象
				element.value="Jimmy";       //设置对象的初始值
				element.disabled =true;		 //设置对象禁用
			}
			
			document.getElementById("password").focus();//设置光标
			function t2(){
				var element = document.getElementById("password");//获取id为password的对象
				element.value="Jimmy";		//设置对象的初始值
				element.readOnly=true;		//设置对象为只读
				element.disabled =true;		//设置对象禁用
			}
			
			document.getElementById("summary").focus();//设置光标
			function t3(){
				var element = document.getElementById("summary");//获取id为summary的对象
				element.value="Jimmy";		//设置对象的初始值
				element.readOnly=true;		//设置对象为只读
				element.disabled =true;		//设置对象禁用
			}
		script>
		<input type="button" value="测试1" onclick="t1()"/> 
		<input type="button" value="测试2" onclick="t2()"/>
		<input type="button" value="测试3" onclick="t3()"/>
		
		
		
		<form action="https://www.baidu.com/s">
			<input type="hidden" id="wd" name="wd" value="123456"/> 
			<input type="submit" value="提交"/>
		form>
		
		
		<input type="radio" name="sex" value="0" id="female"/><label for="female">label>
		<input type="radio" name="sex" value="1" id="male"/><label for="male">label>
		<script>
			function t4(){
				var elements = document.getElementsByName("sex");//获取name为sex的对象(数组)
				for(var i=0;i<elements.length;i++){
					var element = elements[i];		//获取对象数组中的元素(从0开始)
					console.log(element.checked+","+element.value);//获取对象中元素的选中状态和value值
				}
				elements[0].disabled = true;		//设置对象中第0个元素禁选
			}
			document.getElementsByName("sex")[1].checked = true;	//设置对象中第1个元素已选	
		script>
		<input type="button" value="测试4" onclick="t4()"/>
		
		<input type="checkbox" name="sport" value="0" />田径		
		<input type="checkbox" name="sport" value="1" />游泳
		<input type="checkbox" name="sport" value="0" />滑冰
		<script>
			function t5(){
				var elements = document.getElementsByName("sport");		//获取name为sport的对象(数组)
				for(var i=0;i<elements.length;i++){
					var element = elements[i];		//获取对象数组中的元素(从0开始)
					console.log(element.checked+","+element.value);//获取对象中元素的选中状态和value值
				}
				elements[0].disabled = true;		//设置对象中第0个元素禁选
			}
			document.getElementsByName("sport")[1].checked = true;		//设置对象中第1个元素已选	
		script>
		<input type="button" value="测试5" onclick="t5()"/>
		
		<select id="province">					
			<option value="">---请选择---option>
			<option value="001">北京市option>
			<option value="002">广东省option>
			<option value="003">上海市option>
		select>
		<script>
			function t6(){
				var element = document.getElementById("province");//获取id为province的对象
				var options = element.options;	//获取对象中的数组
				for(var i=0;i<options.length;i++){
					var element = options[i];		//获取数组中元素
					console.log(options[i].selected+","+options[i].value);	//获取数组中元素的选中状态和value值
				}
			}
			document.getElementById("province").options[1].selected = true;		//设置数组中第1个元素已选	
			document.getElementById("province").disabled=true;		//设置对象(id为province的对象)不可选	
		script>
		<input type="button" value="测试6" onclick="t6()"/>
	body>
html>

执行结果:
点击测试前:
JavaScript中的form表单组件_第1张图片
点击所有测试后:JavaScript中的form表单组件_第2张图片
点击提交后JavaScript中的form表单组件_第3张图片

你可能感兴趣的:(JavaScript中的form表单组件)