[부스트코스 - 웹 UI 개발] 2. HTML 태그 form 요소

 

폼 요소 = 서버에 데이터를 전달하기 위한 요소

 

그중 대표적인 <input> 요소를 배우기!

 

<input> 은 내용이 없는 빈요소지만 type 속성을 통해서 여러 종류로 나타남

---

 

기본 구조 <input type="요소">...</input>

 

 

 

text

 

<input type="text" placerholder="화면에 노출할 내용">

 

사용자가 입력전에 화면에 미리 노출되는 값의 양식 표현

 

 

 

password

 

<input type="password>

 

사용자가 입력하는 값이 노출되지 않음 (비번칠때)

 

 

 

radio

 

<input type="radio">

 

중복 선택이 안되는 체크박스

 

 

 

checkbox

 

<input type="checkbox">

 

중복선택이 되는 체크박스

 

 

 

submit

 

<input type="subit">

 

form값을 전송

 

 

 

resert

 

<input type="resert">

 

form 값을 초기화 시킴

 

 

 

image

 

<input type="image">

 

form 에 이미지 삽입

 

 

 

butten

 

 

<input type="button">

 

기능이 없다 (커스텀 하여 사용하는 것)

 

 

 

file

 

<input type="file">

 

파일을 서버에 올릴때

 

 

 

select

 

<select>

   <option>......</option>

                 .

                 .

</select>

 

 

일명 선택목록 상자

여러 개의 선택지를 리스트 형태로 노출, 그중에 하나 선택 할 수 있음

 

<option>으로 각 항목 나타내기

option 속성으로 selected 는 선택된 항목을 의미함 (사용자가 선택전 미리 지정된 값이 노출되는 것)

 

 

 

textarea

 

<textarea row="박스 세로 크기(숫자)" rows="가로 크기">

 

여러줄을 넣을 수 있는 텍스트 박스

 

textarea 의 속성 placeholder 은 텍스트 박스에 설명을 미리 노출 시키는 것

 

 

button

 

 

버튼을 만들때 사용 submit, reset, button 3가지 타입이 있음

빈태그가 아님 

 

<button type="submit/reset/button>

 

 

lable

 

모든 form요소에 사용 가능

form요소의 이름과 form요소를 연결시켜주기 위해 사용

 

lable을 사용한것을 클릭했을 경우 해당 form요소를 클릭한 것처럼 동작함

 

<lable for="id(지정한 이름)">연결시킬것</lable>

<input type="..." id="지정한 이름">

 

-> 지정한것과 연결시킬것이 이어진다

 

 

 

fieldset

 

 

여러 form 요소를 그룹화 시킴 ex) 필수 기입 vs 선택기입

 

legend 은 fieldset 그룹의 이름을 지정함 (자식중 가장 먼저 나와야함)

 

 

 

form 

 

: 데이터를 서버로 전송해줌

 

<form action="..." method="...">

 

 

form의 속성 

action  - 데이터 처리를 위한 주소

method - 데이터 전송 방식 지정     

 

method의 속성 = (get/post) 

기입내용 주소창에 노출vs 비노출