이 튜토리얼에서는 JavaScript 형식을 배우고, 토론하고, 이해합니다. 또한 다양한 목적으로 JavaScript 양식을 구현하는 방법도 살펴보겠습니다.
여기에서는 양식에 액세스하는 방법, JavaScript 양식의 값으로 요소를 가져오는 방법, 양식을 제출하는 방법을 알아봅니다.
양식 소개
양식은 HTML의 기본입니다. 우리는 HTML 양식 요소를 사용하여 자바스크립트 형태. 양식을 생성하려면 다음 샘플 코드를 사용할 수 있습니다.
Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br>
코드에서:
- 양식 이름 태그는 양식의 이름을 정의하는 데 사용됩니다. 여기서 양식 이름은 'Login_form'입니다. 이 이름은 JavaScript 형식에서 참조됩니다.
- 작업 태그는 작업을 정의하며 브라우저는 양식이 제출될 때 해당 양식을 처리합니다. 여기서는 아무런 조치도 취하지 않았습니다.
- 조치를 취하는 방법은 다음 중 하나일 수 있습니다. 우편 또는 얻다 , 양식을 서버에 제출할 때 사용됩니다. 두 가지 유형의 메서드 모두 고유한 속성과 규칙을 가지고 있습니다.
- 입력 유형 태그는 양식에서 생성하려는 입력 유형을 정의합니다. 여기서는 입력 유형을 'text'로 사용했습니다. 즉, 텍스트 상자에 값을 텍스트로 입력한다는 의미입니다.
- Net에서는 입력 유형을 'password'로 선택했으며 입력 값은 비밀번호가 됩니다.
- 다음으로 입력 유형을 '버튼'으로 선택했습니다. 여기서 클릭하면 양식의 값을 가져와 표시됩니다.
액션과 메소드 외에도 HTML Form Element에서 제공하는 다음과 같은 유용한 메소드가 있습니다.
양식 참조
이제 HTML을 사용하여 양식 요소를 만들었지만 JavaScript에도 연결해야 합니다. 이를 위해 우리는 getElementById() HTML 양식 요소를 JavaScript 코드로 참조하는 메소드입니다.
사용 구문은 getElementById() 방법은 다음과 같습니다.
let form = document.getElementById('subscribe');
Id를 사용하여 참조를 만들 수 있습니다.
양식 제출
다음으로, 값을 제출하여 양식을 제출해야 합니다. 제출() 방법. 일반적으로 제출하려면 양식에 입력한 값을 제출하는 제출 버튼을 사용합니다.
submit() 메소드의 구문은 다음과 같습니다.
양식을 제출하면 요청이 서버로 전송되기 직전에 작업이 수행됩니다. 이를 통해 양식에 다양한 유효성 검사를 수행할 수 있는 이벤트 리스너를 추가할 수 있습니다. 마지막으로 HTML과 JavaScript 코드의 조합으로 양식이 준비됩니다.
이 모든 것을 모아서 활용해 보세요. 로그인 양식 그리고 가입 양식 둘 다 사용하십시오.
로그인 양식
Login Form <h3> LOGIN </h3> <h4> USERNAME</h4> <h4> PASSWORD</h4> <br><br> function submit_form(){ alert('Login successfully'); } function create(){ window.location='signup.html'; } 로그인 버튼을 클릭했을 때 위 코드의 출력은 다음과 같습니다.
가입 양식
SignUp Page <table class="table"> <tr><td> Name</td> <td></td></tr> <tr><td>Email </td> <td></td></tr> <tr><td> Set Password</td> <td></td></tr> <tr><td>Confirm Password</td> <td></td></tr> <tr><td> </td></tr></table> function create_account(){ var n=document.getElementById('n1').value; var e=document.getElementById('e1').value; var p=document.getElementById('p1').value; var cp=document.getElementById('p2').value; //Code for password validation var letters = /^[A-Za-z]+$/; var email_val = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/; //other validations required code if(n==''||e==''||p==''||cp==''){ alert('Enter each details correctly'); } else if(!letters.test(n)) { alert('Name is incorrect must contain alphabets only'); } else if (!email_val.test(e)) { alert('Invalid email format please enter valid email id'); } else if(p!=cp) { alert('Passwords not matching'); } else if(document.getElementById('p1').value.length > 12) { alert('Password maximum length is 12'); } else if(document.getElementById('p1').value.length <6) { alert('password minimum length is 6'); } else{ alert('your account has been created successfully... redirecting to javatpoint.com'); window.location="https://www.javatpoint.com/" ; < pre> <p>The output of the above code is shown below:</p> <img src="//techcodeview.com/img/javascript-tutorial/97/javascript-form-2.webp" alt="JavaScript Form"> <p>In this way, we can create forms in JavaScript with proper validations.</p> <hr></6)>