JS选择框以及form输入的练习

最新推荐文章于 2020-08-30 17:33:00 发布
最新推荐文章于 2020-08-30 17:33:00 发布
阅读量333 收藏
点赞数
分类专栏： HTML PHP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15379219/article/details/42302503
版权
HTML 同时被 2 个专栏收录
15 篇文章 0 订阅
订阅专栏
PHP
11 篇文章 0 订阅
订阅专栏

原来form表单不止可以直接在html中输入，还可以在JS中输入。

<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>childpage2</title>
<script language="javascript"> 
   function func2_8(){    
   var mychoice=""; 
   for(var i=0;i<document.form1.ah.length;i++){     
   //写的时候要仔细，一个小错误就会导致运行失败  
   if(document.form1.ah[i].checked)       mychoice=mychoice+document.form1.ah[i].value+"、";       }     
   alert("你的选择是:"+mychoice);
      }
   function func2_9(){
	  var xm="";    var nl="";    var dw="";     
	  xm=document.form2.elements["xm"].value;  
nl=document.form2.elements["nl"].value;     
dw=document.form2.elements["dw"].value; 
alert("你填写的是：\n\n姓名："+xm+"\n年龄："+nl+"\n单位："+dw);   }
   </script>
</head>
<body>
我是第二个主页
<input type="button" name="submit" value="click me" οnclick="javascript:alert('hello,Im page2');" >
<hr>
<form name="form1" method="post" action="">     
爱好:<br>    
<input type="checkbox" name="ah" value="运动">运动    
<input type="checkbox" name="ah" value="音乐">音乐    
<input type="checkbox" name="ah" value="旅游">旅游<br>    
<input type="button" name="Submit" value="看看我选择了什么" onClick="func2_8();">  
 </form>
<form name="form2" method="post" action="">    
姓名：<input type="text" name="xm"><br>    
年龄：<input type="text" name="nl"><br>    
单位：<input type="text" name="dw"><br>     
<input type="button" name="Submit" value="看看我填写了什么" onClick="func2_9();">   
</form> 
</body>
</html>



 表单可以编号，注意写代码的习惯要好，functions和form的命名要有序。 

 


 

                

        

        

    




    

      

        

            

              
                
                  奋斗的金鱼
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
form.html（表单练习）

				
			

			

				

					07-22
				

			

		

		

			
				
表单练习，账号text，密码password，性别单选框radio，爱好多选框checkbox，地址下拉列表select，文本域textarea，提交按钮submit


			
		

	



                

              
                



	

		

			

				
					
html表单练习

				
			

			

				

					kylinxjd的博客
				

				

					05-09
					
					4469
					
				

			

		

		

			
				
模拟阿里巴巴注册界面写一个注册表单，分企业和个人两个部分
个人注册

企业注册

html代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, ini...

			
		

	



                


  
              

                


	

		

			

				
					
js小练习（三）：表单操作

				
			

			

				

					我爱吃兔兔的博客
				

				

					09-27
					
					582
					
				

			

		

		

			
				
（一）主要功能：
（1）限制用户名和密码的格式：
包括限制长度，只能是数字和字母,不能为空等等，这部分主要通过正则表达式和onblur事件来筛选判断。
（2）两次密码的验证：
判断两次的value值是否一致，同样是使用到了onblur事件。
（3）单选框：
radio类型，name值相同，js取值的时候不能用document.getElementById(“xxx”)，而要使用document.a...

			
		

	





	

		

			

				
					
Praticando_JS:JS框架练习库

				
			

			

				

					05-11
				

			

		

		

			
				
本资源"Praticando_JS:JS框架练习库"旨在帮助开发者提升对JavaScript框架的理解和应用能力。这个库提供了一系列的练习，覆盖了HTML、CSS以及JavaScript的核心概念，特别强调了JS框架的实践操作。下面我们将详细探讨...

			
		

	



		

			
		



	

		

			

				
					
contactform:联系方式练习

				
			

			

				

					06-29
				

			

		

		

			
				
这个练习涉及到使用JavaScript进行动态交互，确保用户输入的有效性，并处理可能出现的传输错误。  首先，让我们详细探讨联系表单的构建。一个基本的联系表单通常包括输入字段，如姓名、电子邮件、电话号码，以及可能...

			
		

	





	

		

			

				
					
survey-form:调查表练习

				
			

			

				

					03-29
				

			

		

		

			
				
6. **CSS和JavaScript**：虽然题目只提到HTML，但为了提升用户体验，我们通常会结合CSS（Cascading Style Sheets）来美化调查表，以及JavaScript进行交互式功能，比如验证用户输入或实时显示反馈。  7. **响应式设计...

			
		

	





	

		

			

				
					
Basic-Form-validator-using-Vanilla-Javascript

				
			

			

				

					05-07
				

			

		

		

			
				
**标题解析：** "Basic-Form-validator-using-Vanilla-Javascript" 指的是一个使用纯JavaScript（也称为Vanilla JavaScript）实现的基础表单验证器项目。Vanilla JavaScript指的是不依赖任何JavaScript库或框架（如...

			
		

	





	

		

			

				
					
ExercisesSimple:练习简单HTML CSS JS

				
			

			

				

					05-08
				

			

		

		

			
				
在本项目"ExercisesSimple:练习简单HTML CSS JS"中，我们主要关注的是网页开发的基础技术，即HTML、CSS和JavaScript。这三个核心技术是构建任何现代网页的基石。下面将详细介绍这三个方面及其在项目中的应用。  **...

			
		

	





	

		

			

				
					
DW学习笔记：form表单的创建

				
			

			

				

					程序化人生的随机事件
				

				

					12-30
					
					2008
					
				

			

		

		

			
				
学习了一下form表单的创建，掌握了输入文本的、密码等操作。
可是不会JS，按钮显示不出来也不知道为什么。



Formtest



用户账户：

密码：   


    
    简介

			
		

	





	

		

			

				
					
form表单基本练习

				
			

			

				

					weixin_43661378的博客
				

				

					06-01
					
					1238
					
				

			

		

		

			
				
代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>form表单基本练习</title>
	</head>
	<body>
		<img src="01.jpg"/>
		<form action="" method="post">
			用户:  <input type="text" .

			
		

	





	

		

			

				
					
js代码实现简易表单选择

				
			

			

				

					gyw的博客
				

				

					08-30
					
					534
					
				

			

		

		

			
				
文章目录

前言
	一、需求
	二、代码
	总结




前言

没有前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、需求

实现全不选、全选、反选

二、js代码

1.渲染选项

数组内有几项内容就渲染几个选项出来，设置样式之后加入到form1中。


let input_arr;
        let p_arr=["Dior","Chanel","LV","YSL","Mac","TF"]
        let form2 = document.querySelec...

			
		

	





	

		

			

				
					
HTML 表单的练习记录篇

				
			

			

				

					追求，成长
				

				

					12-26
					
					4060
					
				

			

		

		

			
				
前言：
  近期的工作中是负责公司网站的维护，所以就得学习Web前端的知识…时常忘记，所以记录下，也算是学习Web的一个开篇吧！废话不多说，coding …
Ⅰ.简述表单相关的标签：form、fieldset、legend、table、tr、td、input、select、option、textarea 等；表单相关标签对应的部分属性：
    
        标签 
        元素

			
		

	





	

		

			

				
					
表单学习及练习

				
			

			

				

					mover999的博客
				

				

					05-25
					
					691
					
				

			

		

		

			
				
这篇博客是我对form标签学习的一些认识。首先，最重要的是form不是from。在学习过程中注意到一些问题1.name，这个东西随便编，但是不准写汉字2.value：这个标签的内容比较广泛。根据你的内容相机而变。type="button", "reset", "submit" - 定义按钮上的显示的文本type="text", "password", "hidden" - 定义输入字段的初

			
		

	





	

		

			

				
					
HTML表单小练习

				
			

			

				

					longting_的博客
				

				

					05-20
					
					1468
					
				

			

		

		

			
				
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    

			
		

	





	

		

			

				
					
【HTML】表单练习

				
			

			

				

					QiuBika_061的博客
				

				

					12-21
					
					640
					
				

			

		

		

			
				
编码实现如下图表：



代码：


&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt...

			
		

	





	

		

			

				
					
表格，表单（练习）

				
			

			

				

					setsunadoudou的博客
				

				

					09-11
					
					219
					
				

			

		

		

			
				
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{...

			
		

	





	

		

			

				
					
js实现input输入框输入信息后出现下拉选择框

					
最新发布

				
			

			

				

					09-08
				

			

		

		

			
				
要实现输入框输入信息后出现下拉选择框，可以使用JavaScript来完成。下面是实现的步骤：

1. 首先在HTML文件中创建一个输入框和一个空的下拉选择框。
   
   ```html
   <input type="text" id="inputBox" onkeyup="showDropdown()">
   <select id="dropdown"></select>
   ```

2. 在JavaScript中定义一个函数`showDropdown()`，用于在输入框输入信息后显示下拉选择框。
   
   ```javascript
   function showDropdown() {
       // 获取输入框中的值
       var input = document.getElementById('inputBox').value;
       
       // 获取下拉选择框
       var dropdown = document.getElementById('dropdown');
       
       // 清空下拉选择框中的选项
       dropdown.innerHTML = '';
       
       // 创建一个新的选项
       var option = document.createElement('option');
       
       // 设置选项的值为输入框中的值
       option.value = input;
       
       // 设置选项的显示文本为输入框中的值
       option.text = input;
       
       // 将选项添加到下拉选择框中
       dropdown.add(option);
   }
   ```

3. 在输入框中输入信息时，会触发`onkeyup`事件，然后调用`showDropdown()`函数，显示下拉选择框。

这样，在输入框中输入信息后，会根据输入的内容动态生成一个选项，然后将该选项添加到下拉选择框中，实现下拉选择框的动态更新。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值