상호작용(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="전화번호를 입력해 주세요.">

--