✏️ form 태그
웹 브라우저 내에서 사용자에게 정보를 받아올 때 사용하는 태그이다.
밑에 작성하는 모든 태그 즉, 사용자에게 어떠한 정보를 입력받는 요소는form태그 내에 작성해야 한다.
필수 속성
action은form태그 내에 저장된 데이터를 받을 도착지인 주소를 작성해 줘야 한다.method는 데이터를 전송할 때,HTTP의 어느 메서드를 사용할지 결정할 수 있다.GET은 URL의 맨 뒤에?구분자와 제출할 양식을 차례대로 작성하여 보낸다. (단, 보안이 중요한 것들은 보내면 안 됨.)POST는 요청(Request)할 때, 요청의 본문에 담아서 전송한다.
GET과는 다르게URL이 아닌 요청의 본문에 숨겨서 보내기 때문에 보안이 더 튼튼하다.
✏️ label 태그
사용자가 입력하는 요소에 대한 설명을 작성하기 위해 사용한다.
- 어떤
input요소를 설명하는지 알려주기 위해for속성을 꼭 사용해야 한다.
이 속성의 값은input태그의id의 값과 같아야 한다.
✏️ input 태그
사용자가 정보를 입력하는 공간 보여주는 요소이다.
<form action="" method="GET">
<label for="name">이름<label/>
<input type="text" name="name" id="name">
</form>필수 속성
name은 서버에 전송할 때, 서버가 데이터를 구분할 수 있기 위해 사용되는 것이라id와는 무관하다.type은input태그가 다양한 정보를 받기 때문에type의 값이 다양하다. 어느 정도 제한된 범위의 값을 받기 위해 사용하는 속성이다.
일반 속성
placeholder는 미리 작성해 놓은 문구를 input 박스 안에 보여줄 수 있게 해준다.
(회색 글씨로) 주로 어떻게 입력해야 하는지 등을 보여주기 위해 사용한다. 이 값은 input 값을 입력하게 되면 사라지게 된다.autocomplete자동 완성 기능이 추가된다.
해당 필드에 입력한 데이터를 리스트 형태로 보여준다.on/off기능으로 제어가 가능하다.required필수 입력이 필요한 필드에 추가해 준다.disabled필드를 입력할 수 없게 바꿔준다.
클릭 자체도 안 되기 때문에, 전송하면 안 되는 데이터에 사용한다.readonly필드를 변경할 수 없게 읽기 모드로 바꿔준다.
주로 고정된 값으로 제출해야 하는 경우나 회원 정보를 변경할 때 변경해서는 안 되는 데이터에 적용해 준다.
숫자와 관련된 속성
stepnumber속성에서 평점 등 소수점까지 표현해야 하는 경우 등에서 사용이 된다.
또는range속성에서 10퍼센트씩 오르게 하는 등에 사용된다.minlength최소 입력받을 글자수maxlength최대 입력받을 글자수 두 개의 속성은 동시에 사용이 가능하다.
리스트와 관련된 속성
list속성은 미리 정해놓은datalist요소를 해당list속성의 메뉴로 보여준다.
해당input과datalist를 연결하기 위해서는list의 값과datalist의id를 일치시켜 준다.
이 속성은 리스트의 옵션을 선택하더라도 입력값을 수정할 수 있다는 장점을 가지고 있다.
( 더 자세한 예시는 밑의select요소에서 다룰 예정!)
type의 값
| 값 | 설명 |
|---|---|
text | 한 줄 텍스트를 입력받을 수 있다. (엔터를 누르면 전송된다.) |
password | 비밀번호를 입력하는 곳에 사용하는 속성으로 input 내의 값이 마스킹이 되어서 표시된다. |
email | 이메일을 입력받을 때 사용한다. @기호가 없으면 올바르지 않은 이메일로 형식으로 인식한다. |
tel | 전화번호를 입력받을 때 사용하지만, 문자 입력이 가능하다. 그러나 모바일에서는 키보드가 숫자로 뜨는 장점이 있다(디바이스마다 다름) |
number | 숫자를 입력할 때 사용한다. 문자는 입력이 안 되지만 일부 입력이 된다. 그러나 형식을 검토하기 때문에 숫자만 들어간다. |
range | 숫자를 입력받는 것이지만, Bar 형식으로 입력받는다. 퍼센트 단위로 입력받는다고 생각하며 된다. |
date | 날짜를 입력받을 때 사용한다. |
month | 연월만 입력받을 때 사용한다. |
time | 시간을 입력받을 때 사용한다. |
submit | input 태그를 제출 버튼 형식으로 바꿔주는 역할을 한다. 기본값이 ‘제출’이기 때문에 기본값을 변경하고자 한다면 value 속성을 이용한다. |
button | input 태그를 동작하지 않는 버튼 형식으로 바꿔준다. |
reset | input 태그를 초기화 버튼 형식으로 만들어준다. |
checkbox | 무언가를 체크하여 제출할 수 있게 해주는 속성으로, 중복 선택이 가능하다. 전송할 때는 name 값이 제출된다.- checked 처음부터 무언가를 체크되어 있도록 하는 속성이다 |
radio | 다양한 선택지 중에 하나만 선택이 가능하다. 단, checkbox와 다르게 name 속성의 이름을 통일시켜 줘야 한다.- 값을 구분하기 위해서는 value 속성을 사용하여 값을 지정해 줘야 한다.- checked 속성을 사용할 수 있다. |
✏️ select 태그
select태그는option태그를 사용하여 드롭다운 리스트(drop-down list)를 제공한다.
기본적으로 한 개의 값만 선택할 수 있으나 속성을 사용하여 두 개 이상의 옵션을 선택할 수도 있다.
multiple은 두 개 이상의 옵션을 선택할 수 있게 해준다.
✏️ option 태그
option태그는 드롭다운 리스트에서 하나의 옵션을 정의할 때 사용한다.
value속성은 서버에 제출되는 값을 명시해줄 때 사용한다.selected를 사용하여 기본 선택값을 변경할 수 있다.
<select>
<option value="">-- 메뉴 --</option>
<option value="americano">아메리카노</option>
<option value="latte">카페라테</option>
<option value="lait">카페오레</option>
<option value="espresso">에스프레소</option>
</select>
결과 확인
- 첫 번째 옵션의
--메뉴--라는 항목처럼 선택지의 안내 등에 대한 것을 적을 때는,value의 값이null이 아닌 빈 문자열을 넣어주면 된다.
value는 값이 빈 문자열인 경우, 없는 취급을 하므로 위의 예시 형식으로 사용할 때는 꼭 빈 문자열을 넣어야 한다.
𝗤. 그렇다면
optgroup태그는 무슨 역할을 하는가?
𝐀.select태그 내에서 옵션을 정의하는option요소들은 그룹으로 정의할 때 사용한다. 주로 옵션의 수가 많고, 옵션 내에서 주제에 알맞게 분류하고자 할 때 사용한다.
✏️ optgroup 태그
드롭다운 리스트 내에 옵션을 주제별로 구분하고자 할 때 사용한다.
label이라는 속성을 사용하여optgroup의 제목을 설정할 수 있다.
<select>
<optgroup label="커피(Coffee)">
<option value="americano">아메리카노</option>
<option value="caffe latte">카페라떼</option>
<option value="espresso">에스프레소</option>
</optgroup>
<optgroup label="티(Tea)">
<option value="earl grey">얼그레이티</option>
<option value="jasmine">자스민티</option>
</optgroup>
</select>
결과 확인
- 옵션을 주제별로 구분하여 보여준 것을 확인할 수 있다.
< list 속성과 datalist요소 >
input의list속성과 같이 사용되는datalist요소는input의 메뉴(미리보기)로 출력이 된다.
이 요소의 장점은select태그와는 다르게 선택과 수정을 동시에 할 수 있다.
<form action="" method="get">
학과 : <input type="text" name="department" list="depList"><br>
이름 : <input type="text" name="name"><br>
<datalist id="depList">
<option value="컴퓨터공학과"></option>
<option value="기계공학과"></option>
<option value="사회체육과"></option>
</datalist>
<input type="submit">
</form>
결과 확인
- 메뉴를 선택한 것에 끝나지 않고, 원하는 값으로 수정할 수 있다.
✏️ textarea 태그
텍스트 편집 컨트롤러이며, 여러 줄의 텍스트를 입력받고자 할 때 사용한다.
cols는 입력 영역의 너비를 정할 수 있다.rows는 입력 영역이 몇 개의 라인 수를 가질 수 있는지 결정할 수 있다.
<p>길고 긴 문장.</p>
<form action="/" method="get">
<textarea name="opinion" cols="30" rows="5"></textarea><br>
<input type="submit">
</form>
결과 확인
- 엔터를 눌러도 제출이 되지 않으며, 입력을 이어서 작성할 수 있다.
✏️ button 태그
클릭이 가능한 버튼을 나타내는 요소이다.
이 요소는 버튼 기능이 사용한 모든 곳에서 사용이 된다.
value는 버튼의 초깃값을 설정할 수 있다.type는 버튼이 어느 형식으로 사용될지 결정해준다.
-submit은 무언가를 제출할 때 사용된다.
-reset은 작성한 입력 값을 초기화할 때 사용한다.
-button기본 값이며 이러한 경우에는 스크립트 동작을 붙여서 사용할 때 사용된다.
Q. input type="button"과 button의 차이는 무엇인가?
A. input 태그는 기본값이 제출이지만, button은 기본값이 없다.
기본적으로 input 태그는 빈 태그라 자식 요소를 넣을 수 없는 반면에 button 태그는 자식 요소를 넣을 수 있어서, 텍스트뿐만 아니라 아이콘 같은 이미지도 사용할 수 있다.
그리고 input의 value 속성은 문자만 입력이 가능해서 다양한 스타일을 고려하면 button 태그를 사용하면 된다.
추가로 버튼에 텍스트 대신 아이콘을 넣고자 하는 경우에는 아이콘의 접근성에 대해 살펴봐야 한다.
✏️ fieldset 태그
하나의
input안에 다양한label등 즉, 선택지가 많은 경우 이것을 하나로 묶어줄 때 사용한다.
div로 묶어줘도 되지만 묶음 하나가 공통된 주제라면 이 태그로 묶어주는게 좋다.
✏️ legend 태그
fleldset요소의 제목을 나타내며, 꼭fleldset요소의 첫 번째 자식으로 넣어줘야 한다.
<form action="" method="get">
<fieldset>
<legend>로그인</legend>
아이디 : <input type="text" name="name"><br>
패스워드 : <input type="password" name="pass"><br>
<button type="submit">제출하기</button>
</fieldset>
</form>
결과 확인
로그인이라는 제목을 가지고 있는fieldset을 확인할 수 있다.fieldset은 별다른 스타일을 적용하지 않아도 눈에 구분되도록 할 수 있다.
