[form] HTML - <form> 태그 ★★★ - 입력폼양식 (= form태그 = 폼태그/폼요소) ※ 폼데이터 입력/제출

목차

1. <form> 예제 - 입력폼양식
2. <form> 정의
3. <form> 구문
4. <form> 속성
5. <form> 동작 원리
6. <form> 예제 - JS로 폼데이터 입력 여부 체크

<form> 예제 - 입력폼양식

 

<p>홈짱닷컴 (homzzang.com) 로그인</p>

<form action="login_update.php" method="post" enctype="multipart/form-data" autocomplete="off">
  <p>홈짱닷컴 아이디: <input type="text" name="id"></p>
  <p>홈짱닷컴 비밀번호: <input type="password" name="pw"></p>

  <input type="submit" value="로그인">
</form>

 

결과보기

<form> 정의

 

사용자 정보를 서버에 전송하는 입력 서식을 작성할 때 사용.
(예) 회원가입 페이지의 사용자 정보 입력 페이지

 

---

 

1. 

• HTML5에서 제거된 속성 : accept
• HTML5에 추가된 속성: autocomplete, novalidate

 

2. 

<form> 태그는 시작태그와 종료태그로 구성되며, <form> 태그 안엔 아래 태그들이 하나 또는 그 이상 사용될 수 있음. 

• <input> : 입력창
• <textarea> : 여러 줄 텍스트 입력창.
• <button> : 버튼.
• <select> : 선택메뉴.
• <option> : 선택사항.
• <optgroup> : 선택사항 묶음.
• <fieldset> : 폼양식 관련요소 묶음.
• <label> : 인풋태그 꼬리표.

 

3. 

• <form> 태그 안 submit 기능 작동 시, 페이지 새로고침 기본동작 발생함.
• 새로고침 기본동작 차단하려면, JS preventDefault() 메서드나 jQuery preventDefault() 메서드 이용해 기본동착 막아야 함.
• <form> 태그 안에서는 <form> 태그 사용 불가.

 

5. Form (폼) 시스템 개괄 ★★★★★
https://homzzang.com/b/free-4984

 

6.

PHP Warning: Unknown: Input variables exceeded 1000와 같은 에러 발생하면서 폼 입력값이 일부 짤리는 경우에는 서버의 php.ini 파일에서 max_input_vars 값을 늘려주면 됨.

• 수정 전: max_input_vars = 1000
• 수정 후: max_input_vars = 100000

<form> 구문

 

<form> 입력 폼 양식</form>

 

<form> 속성

<form> 동작 원리

 

1. <form> 요소 있는 웹페이지 방문.

2. <form> 데이터 입력.

3. <form> 안의 모든 데이터를 웹 서버 (예: Apache /Nginx)로 전송.

4. 웹서버는 받은 <form> 안의 데이터 처리 위해 웹 프로그램에게 넘김.

5. 웹 프로그램은 <form> 안의 데이터 처리.

6. 처리 결과 담은 새 html 페이지를 웹 서버에게 넘김.

7. 웹서버는 받은 새 html 페이지를 브라우저에 전송

8. 브라우저는 받은 html 페이지를 뿌림.

 

<form> 예제 - JS로 폼데이터 입력 여부 체크

 

<form name="form" action="action_page.php" onsubmit="return input_check()">

   <input type="text" name="id" placeholder="ID">

   <input type="text" name="pw" placeholder="PW">

   <input type="submit" value="확인">

</form>

 

<script>

function input_check() {

    if(form.id.value == "") {

        alert("ID 입력 바람.");

        form.id.focus();

        return false;

    } else if(form.pw.value == "") {

        alert("PW 입력 바람.");

        form.pw.focus();

        return false;

    } else {

        return true;

    }

}

</script>

 

결과보기