HTML - ② 입력 양식

폼 구성

폼(form)은 HTML에서 사용자와 상호작용해서 정보를 입력 받고 서버로 전송하기 위한 양식을 의미

form 태그

<form action="처리할페이지주소" method="get|post"></form>

action 속성

폼 요소에서 사용자와 상호작용으로 입력 받은 값들을 전송할 서버의 URL 주소 작성

method 속성

입력 받은 값을 서버에 전송할 때 송신 방식 작성
속성 값으로 get 또는 post 사용

GET 방식은 주소에 데이터(data)를 추가하여 전달하는 방식입니다.
데이터가 주소 입력창에 그대로 나타나며, 전송할 수 있는 데이터의 크기 또한 제한적입니다.
따라서 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용합니다.

POST 방식은 데이터(data)를 별도로 첨부하여 전달하는 방식입니다.
데이터가 외부에 드러나지 않으며, 전송할 수 있는 데이터의 크기 또한 제한이 없습니다.
따라서 보안성 및 활용성이 GET 방식보다 좋습니다.

input 태그

로그인 페이지의 아이디와 비밀번호처럼 입력받는 요소를 생성할 때 사용

<input type="종류" name="이름" value="초기값">

type 속성

다양한 타입의 입력 요소를 만들기 위해 type 속성값으로 다음과 같은 값을 사용할 수 있습니다.

text: 텍스트 입력란을 만듭니다.
password: 비밀번호 입력란을 만듭니다.
checkbox: 체크박스를 만듭니다.
radio: 라디오 버튼을 만듭니다.
submit: 제출 버튼을 만듭니다.
reset: 리셋 버튼을 만듭니다.
button: 일반 버튼을 만듭니다.
hidden: 화면에 보이지 않는 숨겨진 입력란을 만듭니다.
date: 날짜 입력 요소를 만듭니다.
time: 시간 입력 요소를 만듭니다.
datetime: 날짜와 시간 입력 요소를 만듭니다.
email: 이메일 입력 요소를 만듭니다.
file: 파일 업로드 입력 요소를 만듭니다.
image: 이미지를 나타내는 입력 요소를 만듭니다.
month: 월 입력 요소를 만듭니다.
number: 숫자 입력 요소를 만듭니다.
range: 범위를 선택하는 입력 요소를 만듭니다.
search: 검색 입력 요소를 만듭니다.
tel: 전화번호 입력 요소를 만듭니다.
url: URL 입력 요소를 만듭니다.
week: 주 단위 입력 요소를 만듭니다.
color: 색상 선택 입력 요소를 만듭니다.

<input type="text" name="username">
<input type="password" name="password">
<input type="checkbox" name="check">
<input type="radio" name="radio" value="1">
<input type="submit" value="제출">
<input type="reset" value="초기화">
<button type="button">버튼</button>
<input type="hidden" name="hidden_input">
<input type="date" name="date_input">
<input type="time" name="time_input">
<input type="datetime" name="datetime_input">
<input type="email" name="email_input">
<input type="file" name="file_input">
<input type="image" src="image.jpg">
<input type="month" name="month_input">
<input type="number" name="number_input">
<input type="range" name="range_input">
<input type="search" name="search_input">
<input type="tel" name="tel_input">
<input type="url" name="url_input">
<input type="week" name="week_input">
<input type="color" name="color_input">

라디오 타입

name : name의 값이 같은 것 중에서 하나 선택
value : 선택했을 때 전달될 값
checked : 선택된 상태로 만든다.

<form action="">
    <label for="male">남성</label>
    <input type="radio" name="gender" id="male">
    <label for="famale">여성</label>
    <input type="radio" name="gender" id="famale">   
</form>

label 태그

from 태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용
시각 장애인이 웹을 탐색할 때 스크린 리더(웹 접근성) label 태그로 연결된 상호작용 요소를 읽어 주는 요소로 사용

<label for="user-id">아이디(6자리 이상)</label>
<input type="text" id="user-id">

fieldset, legend 태그

form 태그 안에 사용된 다양한 상호작용 요소도 fieldset 태그를 사용해 그룹을 지을 수 있음
fieldset 태그로 그룹을 지으면 그룹별로 박스 모양의 테두리가 생김.

<body>
    <form>
      <fieldset>
        <legend>기본 정보</legend>      
        <p>
          <label for="userid">아이디</label>
          <input type="text" id="userid">
        </p>
        <p>
          <label for="passwd">비밀번호</label>
          <input type="password" id="passwd">
        </p>
      </fieldset>
      <fieldset>
        <legend>선택 정보</legend>
        <p>
          <label for="age">나이</label>
          <input type="number" id="age">
        </p>
        <p>
          <label for="recommender">추천인</label>
          <input type="text" id="recommender">
        </p>
      </fieldset>
    </form>
   </body>

textarea 태그

여러 줄의 입력 요소를 생성할 때 사용
웹 사이트에서 글을 작성할 때 사용하는 입력 요소는 대부분 textarea 태그로 생성

<body>
    <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" readonly></textarea>
          </label>
        </p>
      </fieldset>
    </form>
</body>

select, option, optgroup 태그

select : 콤보 박스
option : 콤보 박스에 옵션 추가
optgroup : 항목들 그룹으로 묶을 때 사용

optgroup 태그로 항목들을 그룹 지을 때는 반드시 label 속성으로 그룹명 지정해야 함.

select, option 태그 사용 예제

<body>
    <!-- select & option 태그만 사용 -->
    <form action="#" method="post">
      <fieldset>
        <legend>개인 정보 입력</legend>
          <label for="city">지역</label>
          <select name="city" id="city">
            <option value="강북구">강북구</option>
            <option value="강남구">강남구</option>
            <option value="서초구">서초구</option>
            <option value="중원구">중원구</option>
            <option value="분당구">분당구</option>
          </select>
          <input type="submit" value="등록">
      </fieldset>
    </form>
  </body>

optgroup 태그 사용 예제

<body>
  <!-- select & option & optgroup 태그 사용-->
  <form action="#" method="post">
    <fieldset>
      <legend>개인 정보 입력</legend>
        <label for="city">지역</label>
        <select name="city" id="city">
          <optgroup label="서울시">
            <option value="강북구">강북구</option>
            <option value="강남구">강남구</option>
            <option value="서초구">서초구</option>
          </optgroup>
          <optgroup label="경기도 성남시">
            <option value="중원구">중원구</option>
            <option value="분당구">분당구</option>
          </optgroup>
        </select>
        <input type="submit" value="등록">
    </fieldset>
  </form>
</body>

size 속성

콤보박스에서 화면에 노출되는 항목 갯수 지정

<body>
  <!-- select & option 태그만 사용 -->
  <form action="#" method="post">
    <fieldset>
      <legend>개인 정보 입력</legend>
        <label for="city">지역</label>
        <select name="city" id="city" size="3">
          <option value="강북구">강북구</option>
          <option value="강남구">강남구</option>
          <option value="서초구">서초구</option>
          <option value="중원구">중원구</option>
          <option value="분당구">분당구</option>
        </select>
        <input type="submit" value="등록">
    </fieldset>
  </form>
</body>

multiple 속성

select 태그로 생성하는 콤보박스는 기본으로 1개 항목만 선택 할 수 있습니다.
그러나 multiple 속성을 사용하면 여러 항목을 동시에 선택 할 수 있습니다.
콤보박스에서 항목 하나를 선택한 상태로 Ctrl (맥OS에서는 cmd)을 누르고 다은 항목을 클릭하면 됩니다.

<body>
  <!-- select & option 태그만 사용 -->
  <form action="#" method="post">
    <fieldset>
      <legend>개인 정보 입력</legend>
        <label for="city">지역</label>
        <select name="city" id="city" multiple>
          <option value="강북구">강북구</option>
          <option value="강남구">강남구</option>
          <option value="서초구">서초구</option>
          <option value="중원구">중원구</option>
          <option value="분당구">분당구</option>
        </select>
        <input type="submit" value="등록">
    </fieldset>
  </form>
</body>

selected 속성

selected 속성을 사용하면 기본 선택 항목을 변경 할수 있습니다.

<body>
  <!-- select & option 태그만 사용 -->
  <form action="#" method="post">
    <fieldset>
      <legend>개인 정보 입력</legend>
        <label for="city">지역</label>
        <select name="city" id="city">
          <option value="강북구">강북구</option>
          <option value="강남구">강남구</option>
          <option value="서초구" selected>서초구</option>
          <option value="중원구">중원구</option>
          <option value="분당구">분당구</option>
        </select>
        <input type="submit" value="등록">
    </fieldset>
  </form>
</body>

button 태그

<body>
    <form action="#">
        <button type="submit">
        <img src="facebook.png" alt="페이스북 버튼">
        페이스북에 등록하기
        </button>
    </form>
</body>

submit : 폼을 서버로 전송
reset : 입력한 내용 초기화
button : 버튼 형태로 만들지만 기능은 없음

폼 관련 태그에서 사용할 수 있는 추가 속성

disable 속성

상호작용 요소를 비활성화
input, text, area, select, button 태그에서 사용할 수 있습니다.
태그가 비활성화되면 입력 요소는 텍스트를 입력 할 수 없고, 목록 상자는 항목을 선택할 수 없으면, 버튼 요소는 버튼을 클릭할 수 없습니다.

<body>
  <input type="text" disabled>
  <button type="button" disabled>비활성</button>
</body>

readonly 속성

읽기 전용으로 변경

<body>
  <input type="text" readonly>
  <textarea readonly></textarea>
</body>

maxlength 속성

입력할 수 있는 글자 수 제한

<input type="url" maxlength="4">
<textarea maxlength="4"></textarea>

checked 속성

요소를 선택된 상태로 표시
checkbox 혹은 radio 요소에만 사용 가능

<body>
  <form action="#">
    <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>
  </form>
</body>

placeholder 속성

입력 요소에 어떤 값을 입력하면 되는지 힌트를 적는 용도

<input type="tel" placeholder="전화번호를 입력해 주세요.">

required 속성

내용을 폼에 입력한 후 submit 버튼을 클릭하면 폼을 서버로 전송..
이 때 필수 필드에 필요한 내용이 모두 채워졌는지 검사해야 함.

저작자표시 비영리 변경금지

'🎨 Frontend > HTML & CSS' 카테고리의 다른 글

CSS - ② 선택자 (0)	2023.03.13
CSS - ① 기본 (0)	2023.03.13
HTML - ③ 웹 문서 구조를 만드는 시맨틱 태그 (0)	2023.03.13
HTML - 연습 문제(지원서, 주문하기 폼 만들기) (0)	2023.03.09
HTML - ① 필수 태그 (2)	2023.03.08

폼 구성

form 태그

action 속성

method 속성

input 태그

type 속성

라디오 타입

label 태그

fieldset, legend 태그

textarea 태그

select, option, optgroup 태그

select, option 태그 사용 예제

optgroup 태그 사용 예제

size 속성

multiple 속성

selected 속성

button 태그

폼 관련 태그에서 사용할 수 있는 추가 속성

disable 속성

readonly 속성

maxlength 속성

checked 속성

placeholder 속성

required 속성

'🎨 Frontend > HTML & CSS' 카테고리의 다른 글

검색 태그

티스토리툴바