HTML 문법 정리 (form element)

강의 boostcource

폼 요소

• 사용자에게 데이터를 받아야하는 경우 사용되는 요소
• 서버에 데이터를 전달하기 위한 요소
• 대표적: < input >
  < input >: 내용 없는 빈 요소, type 속성을 통해 여러 종류의 입력 양식으로 나타남

type="text"

• 주로 아이디, 이름, 주소, 전화번호 등 단순 텍스트 입력할 때 사용
• placeholder 속성 존재
  • 사용자가 입력하기 전 미리 화면에 노출하는 값, 입력하는 값의 양식 표현 가능

<input type="name" placeholder="input your name">

type="password"

• 암호와 같이 공개할 수 없는 내용 입력 시 사용
• 실제 입력 시 값 노출하지 않음

<input type="password">

type="radio"

• 라디오 버튼 만들 때 사용
• 중복 선택 불가능, 하나의 항목만 선택
• checked(boolean 속성), name(그룹화시켜주는 속성) 속성 존재

<input type="radio" name="gender"> cat
<input type="radio" name="gender"> dog

cat
dog

type="checkbox"

• 체크박스 버튼 만들 때 사용
• 중복 선택 가능
• checked(boolean 속성), name(그룹화시켜주는 속성) 속성 존재

<input type="checkbox" name="hobby"> picture
<input type="checkbox" name="hobby"> reading
<input type="checkbox" name="hobby"> walking

picture
reading
walking

type="file"

• 파일을 서버에 올릴 때 사용

<input type="file">

type="submit | reset | image | button"

• 클릭 가능한 버튼 만듦
  • submit: form 값 전송하는 버튼
  • reset: form 값 초기화하는 버튼
  • image: 이미지 삽입 가능한 버튼 (submit 과 동작 동일)
    • 이미지 관련 속성 src, alt 속성 반드시 필요, width/height 속성 적용 가능
  • button: 아무 기능 없는 버튼

<form action="./test.html">
	메세지:<input type="text" name="message"><br>
    <input type="submit">
    <input type="reset">
    <input type="image" src="http://placehold.it/50x50?text=click" alt="click" width="50" height="50">
    <input type="button" value="버튼">
</form>

메세지:

< select > 콤보박스

• 몇 개의 선택지를 리스트 형태로 노출, 하나를 선택할 수 있게끔 유도 (multiple 속성 사용 시 다중 선택 가능)
  • 내부에 < option > 으로 각 항목 나타냄
  • < option > 속성으로 selected 있음 (선택된 항목 의미)

<select>
	<option>딸기케이크</option>
    <option>초코케이크</option>
    <option>망고케이크</option>
</select>

딸기케이크 초코케이크 망고케이크

< textarea >

• 여러 줄의 텍스트 입력 시 사용
  (한 줄만 입력 가능한 < input type = "text"> 과 달리)
  • text상자 크기 조절하는 rows, cols 속성
    • cols: 가로 크기 조절 (한 줄에 들어가는 글자 수)
    • rows: 세로 크기 조절 (줄 수)

<textarea rows="5" cols="30">
Hello 
what a nice weather
LOVE EVERYTHING
</textarea>

< button >

• 버튼 만들 때 사용
• submit, reset, button 3가지 타입 존재

<button type="submit"> submit </button>
<button type="reset"> reset </button>
<button type="button"> button </button>

submit
reset
button

< label >

• form 이름과 요소를 명시적으로 연결
• 모든 form 요소에서 사용 가능
• form 요소의 id 속성값과 < label >의 for 속성값 동일해야 함
• 사용성, 접근성 측면에서 중요한 역할

<label for="name"> name </label>:<input type="text" id="name"><br>
<label for="nickname"> nickname </label>:<input type="text" id="nickname"><br>
<label for="address"> address </label>:<input type="text" id="address"><br>

name :

nickname :

address :

< fieldset >, < legend >

• form 요소 구조화하기 위해 필요
  • < fieldset >: 여러 개 폼 요소 그룹화해 구조적으로 만듦, form 성격에 따라 구분
  • < legend >: 폼 요소 제목으로 < fieldset > 의 자식으로 fieldset 내부 최상단에 작성

<fieldset>
	<legend> Information </legend>
</fieldset>
<fieldset>
	<legend> additional info </legend>
</fieldset>

Information additional info

< form >

• form 요소 감싸는 태그
• 데이터 묶어서 실제 서버로 전송
• < fieldset >으로 구조화되어있다면 마찬가지로 함께 감싸는 역할을 함
• action 속성: 데이터 처리하기 위한 서버의 주소
• method 속성: 데이터 전송하는 방식 지정
  • get 방식: 데이터 전송 시 주소창에 파라미터 형태로 붙어 데이터가 노출됨
  • post 방식: 데이터 전송 시 데이터 노출되지 않음

<form action="" method="">
	<fieldset>
    	<legend> INFO </legend>
    </fieldset>
    <fieldset>
    	<legend> ADD INFO </legend>
    </fieldset>
</form>

INFO ADD INFO