1015 form 태그와 input 태그

** 입력 양식 (Web Form) **

사용자가 페이지에 값을 전달하는 모든 형식 

- form 자체는 웹사이트에서 많이 사용되지는 않음.

- 모든 사이트가 기본적으로 한 번은 씀 

- 사용자가 그 페이지에 값을 주는 것

- 회원가입, 로그인, 제품 주문, 예매, 게시판 등 

 

 

* form 

1) 모든 폼 요소는 <form></form> 안에서 작성

- 폼 태그 없이 그냥 만들면 겉모습만 폼임.

- 본래의 역할이나 기능을 할 수 없음

- ★필수 속성 name="" action="" method=""

- action : 데이터를 전송할 페이지, 속성은 두 가지!
1) post 주소창에서 숨김, 데이터 이동을 할 때 데이터를 암호화-전송-복구화,

보안성은 있으나 데이터 처리 속도 늦음, ex) 아이디, 비밀번호 정보  

2) get 주소창에서 포함, 보안성이 없고 누구나 알 수 있음. 데이터 처리 속도 빠름

ex) action="insert.php" method="post" 내용을 감춰서 보내줘~ 

- method : 데이터 전송 방식 

 

웹프로그래밍 구조(SQL)

input (result)

 

processing (데이터 처리)

insert : 저장 (회원가입, 게시판 글쓰기)

update : 수정 (회원정보 수정)

delete : 삭제 (회원정보 탈퇴)

select : 검색 (아이디 입력, 회원정보 수정, 게시판 목록, 게시판 글쓰기 전)

 

DB

 

result

  

back-end (asp, php, jsp)

front-end (html, css, js)

react.js, vue.js, node.js: 벡앤드에서 해야될 것을 프론트엔드에서 수행하기 위해 사용하는 언어 (다 스크립트)

 

 

2) 모든 폼 요소는 반드시 이름 (name AND id) 작성

★3) 대부분의 요소는 <input> 태그로 작성

★4) <textarea>, <select>, <button>은 독립태그

 

 

필수 속성!!! <option value="a (DB에 저장되는 이름)">항목1</option>

multiple 속성이 있으면 여러 개 선택 가능.

multiple은 size가 있어야만 만들 수 있다. 

★ xhtml 특징 값을 꼭 반드시 써줘야 한다. 따라서 그 속성을 값으로 입력 

 

<button>버튼에 보여질 텍스트</button>

 

 

★<input type="???" /> 이렇게 해서 대부분의 요소 작성 

* type 속성값

1) text

2) password

3) checkbox : 여러 개 선택 가능 (ex: 취미)

4) radio : 같은 name 중에서 하나 (ex: 동의 여부)

5) file : 파일 업로드 

6) image : submit인데 버튼이 모습이 아니라 이미지로 보이게

(ex : 네이버 검색창의 돋보기 이미지) 

7) hidden : 사용자에게 보여줄 필요는 없지만 필요한 정보를 적어둠. 

 

나머지 세 개는 독립적으로 사용된다~ 

<button type=" ">text</button> 

8) submit

9) reset

10) button 

 

 

--------- 표준화 마크업 시 ---------

5. <input> 요소들은 <label>과 함께 사용

6. <input> 요소들은 <fieldset>이나 <div>와 함께 사용 

 

* 관련 태그(속성)

 

1. fieldset : 양식의 소그룹, 폼태그 내에서 그룹을 나눠야 될 때 사용! 

2. legend : fieldset의 제목, 왜 그룹으로 나눴는지를 설명! form 태그의 제목 기능

 

 

3. label : 필드와 텍스트의 그룹, 글자와 인풋 태그를 묶어줌 

4. for(속성) : 연결하고자 하는 필드의 id값 입력  

<label for="id">전화번호</label>

<input type="text" id="" name="" />

label 태그를 쓰는 이유!

관련 텍스트를 누르면 관련 항목을 바로 입력할 수 있다.

오디오로 듣는 사람도 듣고 바로 입력할 수 있다. 

 

 

앞에서 배운 내용을 활용한 회원가입 페이지 만드는 법

 

 

1. 먼저 <form> 태그를 만들어주고,

모든 항목은 회원가입과 관련돼 있으니까

<fieldset>으로 묶어주고

<legend>로 회원가입이라고 명시해준다.

 

 

2. 그리고 앞서 배운 <label for="id"> 태그와

<input type="" name="" id="" />태그를 활용해야

관련항목을 눌렀을 때 곧바로 입력창으로 이동할 수 있다.

 

3. 비밀번호는 <input type="password" name="" id="" />라고

비밀번호 값을 입력해줘야 안 보이게 처리 돼서 나온다.

 

 

 

4. 성별을 입력하는 항목에서 복수선택이 가능하지 않도록 하려면

성별 항목의 name을 모두 동일하게 해줘야 하나만 선택이 가능하다.

이용약관도 마찬가지고.

 

5. 이메일은 <select>태그와 <option>을 활용하면 된다.

 

6. 취미 같은 건 복수 선택이 가능하도록 그냥 <checkbox>로

만들어주면 된다.

 

7. 초기화, 가입하기 버튼은 앞서 설명했던

input과 독립적인 버튼이기 때문에 

<button type=""></button>을 통해서 입력해준다.