상호작용(form) 관련 태그
상호작용하기 위한 태그는 무엇이 있을까?
form 태그
--
form태그는
폼 양식을 의미하는 태그로
폼을 구성하는 태그는 모두 from 태그 안에 작성해야 한다.
폼(from)은 HTML에서 사용자와 상호작용을 통해 정보를 입력받고 서버로 전송하기 위한 양식을 의미한다.
기본 형식
<form action="서버 url" method="get 또는 post"></form>action 속성
폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL 주소를 적는다.
method 속성
입력받은 값을 서버에 전송할 때 송신 방식을 작성한다.
속성 값으로는 "get" 또는 "post"를 사용할 수 있다.
actions 속성과 method 속성을 같이 사용할 수 있으며
해당 속성들은 서버에서 처리하므로 서버 영역 개발자가 작성하거나 알려준다.
--
input 태그
--
input 태그는
아이디나 비밀번호처럼 텍스트를 입력받는 요소를 생성할 때 사용된다.
기본 형식
<input type="종류" name="이름" value="초기값">type 속성은
입력된 속성 값에 따라 상호작용 요소의 종류를 결정한다.
"텍스트박스", "체크박스", "파일 업로드", "라디오 버튼" 등 다양한 타입이 존재한다.
name 속성은
해당 입력 요소의 이름을 정의한다.
form태그에 의해 서버로 전송될 때, name 속성에 작성된 값을 이름으로 지정하여
서버에서는 지정된 이름으로 입력 요소를 식별할 수 있다.
value 속성은
입력 요소의 초기값으로 해당 값으로 처음부터 요소에 값이 초기값으로 입력되어 있다.
예시 코드
<input type="text">
<input type="password">
<input type="tel">
<input type="number">
<input type="url">
<input type="search">
<input type="email">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="button">
<input type="image" src="java.jpg">
<input type="hidden">
<input type="date">
<input type="datetime-local">
<input type="month">
<input type="week">
<input type="time">
<input type="range">
<input type="color">
<input type="submit">
<input type="reset">
--
label 태그
--
label 태그는
form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용된다.
label 태그를 잘 사용하면 label 태그만 클릭해도 상호작용 요소를 선택할 수 있다.
시각 장애인이 웹을 탐색할 때 사용하는 보조 도구인 "스크린 리더기"가 label 태그로 연결된 상호작용 요소를
쉽게 식별할 수 있으므로 웹 접근성을 향상하기 위해서라도 필수로 사용하는 것을 권장한다.
label 태그는 사용하는 방법에 따라 암묵적인 방법과 명시적인 방법으로 구분된다.
[암묵적인 방법] label 태그에 상호작용 요소를 포함하는 방법
<label>
아이디
<input type="text"> <--- 상호작용 요소
</label>
[명시적인 방법] label 태그의 "for 속성"과 상호작용 요소의 "id 속성"을 같은 값으로 정의한다.
<label for="userpw">비밀번호</label>
<input type="password" id="userpw">
<!-- for속성값과 id속성값이 같다. -->
[예외적인 방법] 암묵적인 방법과 명시적인 방법을 함께 사용할 수도 있다.
<label for="username">
<input type="text" id="username">이름
</label>--
fieldset 태그 & legend 태그
--
form 태그 안에서 사용된 다양한 상호작용 요소들도 "fieldset 태그"를 사용하면 그룹을 만들 수 있다.
- fieldset 태그 : 상호작용 요소들을 그룹으로 묶는다. (그룹 별로 박스 모양의 테두리가 생긴다.)
- legend 태그 : "fieldset 태그"로 그룹 지은 요소들에 이름을 붙일 수 있다.
기본 형식
<form action="#">
<fieldset>
<legend>그룹 이름</legend>
<!-- 상호작용 요소 생략 -->
</fieldset>
</form>
예시 코드
<form action="#">
<fieldset>
<legend>기본 정보</legend>
<p>
<lable for="userid">아이디</lable>
<input type="text" id="userid">
</p>
<p>
<lable for="passwd">비밀번호</lable>
<input type="password" id="passwd">
</p>
</fieldset>
<fieldset>
<legend>선택 정보</legend>
<p>
<lable for="age">나이</lable>
<input type="number" id="age">
</p>
<p>
<lable for="recommender">추천인</lable>
<input type="text" id="recommender">
</p>
</fieldset>
</form>
--
textarea 태그
--
textarea 태그는
여러 줄을 입력할 수 있는 텍스트 박스 같은 요소를 생성한다.
기본 형식
<textarea>초기값</textarea>"input 태그"와는 다르게 닫는 태그가 존재하여
초기값을 정의할 때 "input 태그"는 "value 속성"에 정의하지만
"textarea 태그"는 콘텐츠 영역에 정의한다.
예시 코드
<form action="#" method="post">
<fieldset>
<legend>블로그 글쓰기</legend>
<p>
<label for="title">제목
<input type="text" id="title" name="title">
</label>
</p>
<p>
<label for="desc">내용
<textarea id="desc" name="desc"></textarea>
</label>
</p>
</fieldset>
</form>
--
select 태그 & option 태그 & optgroup 태그
--
select 태그를 통해 "콤보박스"를 생성할 수 있으며,
option 태그를 통해 "항목"을 추가할 수 있고,
optgroup 태그를 통해 항목들을 "그룹"으로 묶을 수 있다.
기본 형식
<select>
<optgroup label="그룹 이름">
<option value="서버에 전송할 값">웹 브라우저에 표시할 값</option>
</optgroup>
</select>option 태그는
서버에 전송할 값을 "value 속성"으로 지정할 수 있으며
해당 속성을 생략하면 option 태그의 콘텐츠로 작성한 텍스트가 값으로 전송된다.
예시 코드
<select name="week" id="week">
<option value="월">월요일</option>
<option value="화">화요일</option>
<option value="수">수요일</option>
<option value="목">목요일</option>
<option value="금">금요일</option>
<option value="토">토요일</option>
<option value="일">일요일</option>
</select>
예시 코드
<select name="week" id="week">
<optgroup label="평일">
<option value="월">월요일</option>
<option value="화">화요일</option>
<option value="수">수요일</option>
<option value="목">목요일</option>
<option value="금">금요일</option>
</optgroup>
<optgroup label="주말">
<option value="토">토요일</option>
<option value="일">일요일</option>
</optgroup>
</select>
select 태그의 다양한 속성 종류
"size 속성"은
화면에 노출되는 항목의 개수를 지정할 수 있다.
(기본값은 1)
예시 코드
<select name="week" id="week" size="3">
<option value="월">월요일</option>
<option value="화">화요일</option>
<option value="수">수요일</option>
<option value="목">목요일</option>
<option value="금">금요일</option>
<option value="토">토요일</option>
<option value="일">일요일</option>
</select>
"multiple 속성"은
여러 항목을 동시에 선택이 가능하게 해준다.
(항목을 하나 선택한 상태로 "ctrl키"를 누르고 다른 항목 선택 가능)
예시 코드
<select name="week" id="week" multiple>
<option value="월">월요일</option>
<option value="화">화요일</option>
<option value="수">수요일</option>
<option value="목">목요일</option>
<option value="금">금요일</option>
<option value="토">토요일</option>
<option value="일">일요일</option>
</select>
"selected 속성"은
항목들 중에서 기본으로(초기값) 선택될 항목을 설정할 수 있다.
(생략하면 첫 번째 항목이 기본으로 선택될 항목으로 정의된다.)
예시 코드
<select name="week" id="week">
<option value="월">월요일</option>
<option value="화">화요일</option>
<option value="수">수요일</option>
<option value="목" selected>목요일</option>
<option value="금">금요일</option>
<option value="토">토요일</option>
<option value="일">일요일</option>
</select>
--
button 태그
--
기존에 "input 태그"에서 "type 속성"값을 submit, reset, button으로 지정하여 버튼을 생성할 수 있었지만
"button 태그"로도 버튼을 생성할 수 있으며 마찬가지로 "type 속성"을 가지고 있다.
기본 형식
<button type="종류">버튼 내용</button>type 종류
- submit : 폼을 서버에 전송할 목적
- reset : 상호작용 요소에 입력된 내용을 초기화하는 버튼
- button : 단순한 버튼 목적
예시 코드
<button type="submit">
<img src="spring boot.png" alt="스프링 버튼">
스프링 프로젝트 시작하기
</button>
--
폼 관련 태그에서 사용 가능한 속성 종류
--
disabled 속성
상호작용 요소를 비활성화하여 사용을 못하게 한다.
사용 가능한 태그
- input 태그
- textarea 태그
- select 태그
- button 태그
기본 형식
<태그 disabled>
예시 코드
<input type="text" disabled>
<button type="button" disabled>비활성</button>
readonly 속성
상호작용 요소를 일기 전용으로 변경하여
입력 요소에 텍스트를 입력을 못하며, 해당 요소를 선택하거나 드래그를 통해 내용을 복사할 수도 없다.
사용 가능한 태그
- textarea 태그
- input 태그 (단, "type 속성"값이 text, search, url, tel, email, password, date, month, week, time, datetime-local, number 인 경우에만 사용 가능)
기본 형식
<태그 readonly>
예시 코드
<input type="password" readonly>
<textarea readonly></textarea>
maxlength 속성
입력할 수 있는 글자의 수를 제한한다.
사용 가능한 태그
- textarea 태그
- input 태그 (단, "type 속성"값이 text, search, url, tel, email, password, date, month, week, time, datetime-local, number 인 경우에만 사용 가능)
기본 형식
<태그 maxlength="숫자">
예시 코드
<input type="url" maxlength="4">
<textarea maxlength="4"></textarea>
checked 속성
요소를 선택된 상태로 표시한다. (초기값으로 선택)
사용 가능한 태그
- input 태그 (단, "type 속성"값이 checkbox, radio 인 경우에만 사용 가능)
기본 형식
<태그 checked>
예시 코드
<fieldset>
<legend>좋아하는 과일</legend>
<input type="checkbox" id="banana" name="banana" value="banana">
<label for="banana">banana</label>
<br>
<input type="checkbox" id="apple" name="apple" value="apple">
<label for="apple">apple</label>
<br>
<input type="checkbox" id="orange" name="orange" value="orange" checked>
<label for="orange">orange</label>
<br>
</fieldset>
placeholder 속성
입력 요소에서 어떤 값을 입력해야 하는지에 대한 힌트를 보여주는 용도로 사용된다.
기본 형식
<input placeholder="입력값에 대한 힌트">
예시 코드
<input type="tel" placeholder="전화번호를 입력해 주세요.">
--