[부스트코스 강의] 2. (3) HTML 태그 ( 폼 요소 )

폼 스타일 관련 요소 (Form)

 < input > 요소 

< input type = "..." >

 

text : 아이디, 이름, 주소 등 단순 텍스트  (placeholder 속성 : 입력 전 미리 화면에 노출)

password : 암호같이 공개할 수 없는 내용  (placeholder 속성 : 입력 전 미리 화면에 노출)

radio : 중복 선택 X  (checked 속성 : 미리 선택 / name 속성 : 그룹화)

checkbox : 중복 선택 O  (checked 속성 : 미리 선택 / name 속성 : 그룹화)

file : 파일을 서버에 올릴 때

submit : form 값 전송  (value 속성 : 이름 지정)

reset : form 값 초기화  (value 속성 : 이름 지정)

image : 이미지 삽입  (src 속성 : 경로 / alt 속성 : 대체 텍스트 / width 속성 / height 속성)

button : 아무 기능 없는 버튼  (value 속성 : 이름 지정)

 

 

 

 < select > 요소 

선택 목록 상자, 콤보 박스

 

selected 속성 : 미리 선택된 항목

<select>
     <option>서울</option>
     <option>경기</option>
     <option>강원</option>
</select>

 

 

 

 < textarea > 요소 

여러줄 텍스트 입력

<textarea cols = "30" rows = "5" placeholder = "짧게 작성"></textarea>

 

cols 속성 : 가로 (한줄에 들어가는 글자 수)

rows 속성 : 세로 (화면에 보여지는 줄 수) 

placeholder 속성 :  입력 전 미리 화면에 노출

 

 

 

 < button > 요소 

<button type = "....">이름</button>

 

submit / reset / button

 

버튼 태그는 내용을 직접 적을 수 있기 때문에 스타일에 더 자유로움

 

 

 

폼 구조 관련 요소

 < label > 요소 

폼 컨트롤과 연결 시켜주기 위함으로 웹 접근성 향상에 도움

<label for = "username">이름</label>
<input type = "text" id = "username">

 

 

 

 < fieldset > 요소 

여러개의 폼 요소를 그룹화 하여 구조적으로 만들기 위해 사용

 

 

 < legend > 요소 

폼 요소의 제목으로 <fieldset> 내부에 작성

<fieldset>
       <legend>기본 정보</legend>
       ... 폼 요소들 ...
</fieldset>

 

 

 < form > 요소 

폼 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송

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

 

action 속성 : 폼 데이터를 처리하기 위한 서버의 주소

method 속성 : 데이터를 전송하는 방식 지정 ( get / post : 민감한 정보 )