[TIL] 폼(FORM) 요소

이지예·2022년 5월 3일
0

HTML

목록 보기
6/9

폼(FORM) 요소

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

INPUT 요소 :

대표적인 폼 요소로, 내용이 없는 빈요소이고, type 속성이 들어간다.
값을 입력받을 수 있는 박스가 뜬다. placeholder속성도 가질 수 있다.

<input type="text">

placeholder

아이디 :
텍스트를 입력받는 박스 안에 palceholder에 적힌 글자가 적히게 되고,
사용자가 입력을 시작하면 글자가 사라지게끔 만들어서 양식 가이드처럼 활용 할 수 있다.

아이디 : <input type="text" placeholder="영문으로만 써주세요">

password :

text와 동일해보이지만 화면에 입력한 값이 노출되지 않는다. 서버에 실제 값이 전달될 때만 입력한 값이 넘어간다.

<input type="password">

radio :

체크 란이 뜨게 된다. name 이라는 속성을 덧붙이면 같은 name을 가지는 radio 버튼들은 성별 체크란과 같이 어느 하나만 골라야 할 경우, 누른 버튼을 제외하고 나머지 버튼이 취소되는 동작을 한다.

<input type="radio">

checkbox :

radio와 비슷하게 보이지만, checkbox type은 중복 선택이 가능하다.
radio처럼 name속성을 이용해서 값을 묶어줘야 실제 값이 전달될 때
잘 구분돼서 전달된다.

<input type="checkbox">

checked : 남자 , 여자

radio와 checkbox는 checked라는 속성이 있다. boolean 속성으로, checked가 존재하면 그것만으로 참이 되어 사용자가 체크를 하거나 선택을 하지 않더라도 기본값으로 선택된 상태로 나오게 하는 속성이다.

남자 <input type="radio" name="gender" checked>, 여자 <input type="radio" name="gender">

file :

내 컴퓨터에 있는 파일을 서버에 올릴 때 사용하는 타입이다.

<input type="file">

0개의 댓글