[HTML] 입력 양식 작성하기 (1)

Preface

이번 장에선 폼을 사용하는 방법과 input 태그의 다양한 속성을 공부했다.

input 태그는 속성의 종류가 정말 많아 웬만한 타입의 정보는 모두 입력받을 수 있을 것 같다는 생각을 했다.

또, 이번 장에선 서버 프로그램과 연관된 것이라며 다루지 않고 넘어간 몇몇 속성들이 있는데,

이들을 보며 지난 책에서 PHP와 Apache를 연동하여 웹 서버를 잠시 다루었던 것이 떠올랐다.

그러다 문득 제대로 된 동적 웹 사이트를 만들려면 서버 스크립트 언어도 배워야 할 것 같다는 생각이 들어 친구에게 실무에선 PHP와 JSP 중 주로 어떤 언어를 사용하는지 물어봤다.

친구는 서버사이드 렌더링을 하지 않기 때문에 서버 스크립트 언어를 사용하지 않는다는 답변을 줬다.

구글링을 통해 서버사이드 렌더링의 정의를 읽어봤지만, 아직 친구의 말을 완벽히 이해하지 못했다.

친구와 이야기를 조금 더 나눠본 후 다음 글을 작성할 때 해당 의문에 대한 해답을 정리해서 올릴 계획이다.

1. 폼 삽입하기

- 폼(form): 입력 양식이라고도 하며, 특정 항목에 사용자가 뭔가를 입력할 수 있게 만든 것

→ 폼과 관련한 작업은 DB를 기반으로 작동하며, 폼에 입력한 정보는 서버 프로그래밍을 이용해 처리한다.

- <form> 태그: 폼을 만들 때 사용한다.

- <form> 태그의 속성

1) method: 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정한다.

① get: 데이터를 256~4,096byte까지만 서버로 넘길 수 있으며, 주소 표시줄에 입력한 내용이 드러난다.

② post: 입력한 내용의 길이에 제한받지 않고, 입력한 내용도 드러나지 않는다.

2) name: 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정한다.

3) action: <form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정한다.

4) target: action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 창에서 열도록 한다.

5) autocomplete: 예전에 입력한 내용을 자동으로 표시해 주며, 기본 속성값은 'on'이다.

- <fieldset> 태그: 하나의 폼 안에서 여러 구역을 나누어 표시할 때 사용한다.

- <legend> 태그: <fieldset> 태그로 묶은 그룹에 제목을 붙일 때 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>레드향 주문하기</title>
</head>
<body>
  <h1>레드향 주문하기</h1>
  <form action="">
    <fieldset>
      <legend>상품 선택</legend>
    </fieldset>
    <fieldset>
      <legend>배송 정보</legend>
    </fieldset>      
  </form>
</body>
</html>

- <label> 태그: <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용한다.

→ 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 웹 브라우저에게 알려준다.

- 레이블(label): 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트

- <label> 태그를 사용하는 방법

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>웹 폼 삽입하기</title>
</head>
<body>
    <form action="">
        <!-- label과 input을 떨어뜨려 작성하는 방법 -->
        <label for="user-id">아이디 : </label>
        <input type="search" id="user-id">
        <!-- for과 id는 한 세트이다. -->

        <!-- label과 input을 붙여서 작성하는 방법 -->
        <label>비밀번호 : <input type="password"></label>
    </form>
</body>
</html>

2. 사용자 입력을 위한 input 태그

- <input> 태그: 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용한다.

- <input> 태그의 type 속성 종류 1

종류	설명
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스를 넣는다.
password	비밀번호를 입력할 수 있는 필드를 넣는다. ('*'나 '●'로 표시된다.)
search	검색할 때 입력하는 필드를 넣는다.
url	URL 주소를 입력할 수 있는 필드를 넣는다.
email	이메일 주소를 입력할 수 있는 필드를 넣는다.
tel	전화번호를 입력할 수 있는 필드를 넣는다.
checkbox	주어진 여러 항목에서 2개 이상 선택할 수 있는 박스를 넣는다.
radio	주어진 여러 항목에서 1개만 선택할 수 있는 버튼을 넣는다.
number	숫자를 조절할 수 있는 스핀 박스를 넣는다.
range	숫자를 조절할 수 있는 슬라이드 막대를 넣는다.
date	사용자 지역을 기준으로 날짜(연, 월, 일)를 넣는다.
month	사용자 지역을 기준으로 날짜(연, 월)를 넣는다.
week	사용자 지역을 기준으로 날짜(연, 주)를 넣는다.
time	사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)을 넣는다.
datetime	국제 표준시로 설정된 날짜와 시간을 넣는다.
datetime-local	사용자가 있는 지역을 기준으로 날짜와 시간을 넣는다.
submit	전송 버튼을 넣는다. (value에 이름 입력)
reset	리셋 버튼을 넣는다. (value에 이름 입력)
image	submit 버튼 대신 사용할 이미지를 넣는다.
button	일반 버튼을 넣는다.
file	파일을 첨부할 수 있는 버튼을 넣는다.
hidden	사용자에게 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만든다.

- 텍스트 필드와 비밀번호 필드에서 사용하는 주요 속성

1) size: 필드의 길이를 지정하는데, 화면에 몇 글자가 보이도록 할 것인지를 지정하는 것이다.

2) value: 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여 주는 내용이다.

→ 비밀번호 필드에선 사용하지 않는다.

3) maxlength: 필드에 입력할 수 있는 최대 문자 수를 지정한다.

- 여러 항목 중 1개만 선택하려면 라디오 버튼을, 2개 이상 선택하려면 체크 박스를 사용한다.

1) value: 선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정한다.

→ 영문이거나 숫자여야 하며, 필수 속성이다. (라디오 버튼에선 yes or no로 사용하는 듯?)

2) checked: 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>레드향 주문하기</title>
</head>
<body>
  <h1>레드향 주문하기</h1>
  <form>
    <fieldset>
      <legend>상품 선택</legend>
      <p><b>주문할 상품을 선택해 주세요.</b></p>
      <ul>
        <li>
          <label><input type="checkbox" value="s_3">선물용 3kg</label>
          <input type="number">개
        </li>
        <li>
          <label><input type="checkbox" value="s_5">선물용 5kg</label>
          <input type="number">개
        </li>
        <li>
          <label><input type="checkbox" value="f_3">가정용 3kg</label>
          <input type="number">개
        </li>
        <li>
          <label><input type="checkbox" value="f_5">가정용 5kg</label>
          <input type="number">개
        </li>
      </ul>   
      <p><b>포장 선택</b></p>
      <ul>
        <li><label><input type="radio" name="gift" value="yes" >선물 포장</label></li>
        <li><label><input type="radio" name="gift" value="no">선물 포장 안 함</label></li>
      </ul>     
    </fieldset>
    <fieldset>
      <legend>배송 정보</legend>
      <ul>
        <li>
          <label for="user-name">이름 </label>
          <input type="text" id="user-name">
        </li>
        <li>
          <label for="addr">배송 주소</label>
          <input type="text" id="addr">
        </li>
        <li>
          <label for="mail">메일 주소</label>
          <input type="email" id="mail">
        </li>        
        <li>
          <label for="phone">연락처</label>
          <input type="tel" id="phone">
        </li>
      </ul>  
    </fieldset>      
  </form>
</body>
</html>

- 라디오 버튼의 name 속성: PHP와 같은 웹 프로그래밍에서 폼 요소를 제어할 때 주로 사용하며, 하나의 버튼만 선택할 수 있게 하려면 모든 라디오 버튼의 name 값을 똑같이 지정해야 한다.

728x90

저작자표시

'Web Front > HTML + CSS + 자바스크립트' 카테고리의 다른 글

[CSS] CSS의 기본 (0)	2022.07.21
[HTML] 입력 양식 작성하기 (2) (0)	2022.07.18
[HTML] 웹 문서에 다양한 내용 입력하기 (2) (1)	2022.07.16
[HTML] 웹 문서에 다양한 내용 입력하기 (1) (0)	2022.07.15
[HTML] HTML 기본 문서 만들기 (0)	2022.07.14