LGHV_3기_입력 양식 작성하기_HTML/CSS(5.1)

Pepzera·2025년 3월 16일
LG 헬로비전 DX DATA SCHOOL 3기 공부 정리웹 개발

LGHV3기_공부정리

목록 보기
6/34

Chap 05-1. 입력 양식 작성하기

입력 양식 작성하기

1. 폼 삽입하기

웹에서 만나는 폼

  • 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼(form)
  • 폼과 관련된 대부분의 작업들은 정보를 저장하거나 검색하거나 수정하는 일들
  • 이런 작업은 모두 데이터베이스를 기반으로 함
  • 아이디를 입력하는 텍스트 필드나 버튼 같은 폼의 형태를 만드는 것은 HTML 태그
  • 폼에 입력한 사용자 정보를 처리하는 것은 ASP나 PHP 같은 서버 프로그래밍 이용

<form> 태그

  • 폼을 만드는 기본 태그. <form>과 </form> 사이에 여러 폼 요소 삽입
  • 기본형 : 
<form [속성=”속성값”]> 여러 폼 요소 </form>

(우리가 아는 폼의 형태!)

<form> 태그의 속성

속성설명
method사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정함.
▶ get : 데이터를 256 ~ 4,096 byte까지만 서버로 넘길 수 있음. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있음.
▶ post : 입력한 내용의 길이에 제한받지 않고, 사용자가 입력한 내용도 드러나지 않음.
name자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정함.
action<form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정함.
targetaction 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함.

<fieldset> 태그

  • 폼 요소를 그룹으로 묶는 태그
  • 기본형 : 
<fieldset [속성=”속성값”]> … </fieldset>

<legend> 태그

  • 그룹으로 묶는 구역에 제목을 붙이는 태그
  • 기본형 : 
<fieldset>
  <legend> 그룹 이름 </legend>
</fieldset>

코드 예시 )

...
<body>
  <h1>레드향 주문하기</h1>
  <!-- form 태그 삽입하기 & 그룹으로 묶고 제목 붙이기 -->
  <form>
    <fieldset>
      <legend>상품 선택</legend>
    </fieldset>
    <fieldset>
      <legend>배송 정보</legend>
    </fieldset>
  </form>
</body>
</html>

✔ 결과

<label> 태그

  • <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용함
  • label 태그를 사용하면 input 태그의 위치 말고도, <label>로 설정한 부분을 클릭해도 input 태그로 마우스가 가게 된다.

코드 예시 ) - label 태그 안에 input 태그 넣기 

...
  <meta charset="UTF-8">
  <title>label 태그 사용하기</title>
</head>
<body>
  <form>
    <!-- label 태그 안에 input 태그 넣기 -->
    <label>아이디(6자 이상) <input type="text"></label>
  </form>
</body>
</html>

코드 예시 ) - label 요소와 input 요소 연결하기

...
  <meta charset="UTF-8">
  <title>label 태그 사용하기</title>
</head>
<body>
  <form>
    <!-- label 요소와 input 요소 연결하기 -->  
    <label for="user-id">아이디(6자 이상) </label>
    <input type="text" id="user-id">
  </form>
</body>
</html>

✔ 결과

2. <input> 태그

type = “text”

  • 한 줄짜리 텍스트 입력 필드
  • 주로 아이디나 이름, 주소 등 텍스트 입력

type = “password”

  • 비밀번호 입력란
  • 사용자가 입력하는 내용이 ‘*’ 나 ‘•’로 표시된다.

코드 예시 ) - 간단한 로그인 폼 만들기

...
	<title>로그인</title>
  </head>
  <body>
  <form>
    <fieldset>
      <!-- 텍스트 필드와 비밀번호 필드가 있는 로그인 폼 만들기 -->
      <label>아이디 : <input type="text" size="30"></label><br>
      <label>비밀번호 : <input type="text" size="15" maxlength="15"></label><br>
      <input type="submit" value="로그인">
    </fieldset>
  </form>
  </body>
</html>

✔ 결과

type = “search”

  • 검색 필드
  • 검색 창에 x 표시가 되어 검색어 삭제 쉬움

type = “url”

  • 웹 주소 필드
  • http://로 시작하는 사이트 주소 입력

type = “email”

  • 메일 주소 입력 필드
  • 메일 주소 형식 자동 체크

type = “tel”

  • 전화번호 입력 필드
  • 사용자 입력을 체크하지는 않음

코드 예시 ) - 배송 정보 입력하는 폼 만들기

...
  <title>배송 정보 입력하는 폼 만들기</title>
</head>
<body>
  <form>
    <fieldset>
      <legend>배송 정보</legend>
      <ul>
        <li>
          <label>이름 <input type="text" size="20"></label>
        </li>
        <li>
          <label>패스워드 <input type="password"></label>
        </li>
        <li>
          <label>배송 주소 <input type="text" size="25"></label>
        </li>
        <li>
          <label>이메일 <input type="email" size="20"></label>
        </li>
        <li>
          <label>연락처 <input type="tel" size="12" maxlength="11"></label>
        </li>
      </ul>
    </fieldset>
  </form>
</body>
</html>

✔ 결과

type = “radio”

  • 여러 항목 중 하나만 선택할 때

type = “checkbox”

  • 여러 항목 중 둘 이상을 선택할 때

코드 예시 ) - 체크 박스와 라디오 버튼을 삽입하는 폼 만들기

...
  <title>상품 선택</title>
</head>
<body>
  <form>
    <fieldset>
      <legend>상품 선택</legend>
      <p>주문할 상품을 선택해 주세요.</p>
      <ul>
        <li>
          <label>
            <input type="checkbox" name="prod" value="s_3"> 선물용 3kg
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox" name="prod" value="s_5"> 선물용 5kg
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox" name="prod" value="h_3"> 가정용 3kg
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox" name="prod" value="h_5"> 가정용 5kg
          </label>
        </li>
      </ul>
      <p>포장 선택</p>
      <ul>
        <li>
          <label>
	          <!-- checked를 선택하면 처음에 기본으로 선택되어짐 -->
            <input type="radio" name="gift" value="yes" checked> 선물 포장
          </label>
        </li>
        <li>
          <label>
            <input type="radio" name="gift" value="no" > 선물 포장 안함
          </label>
        </li>
      </ul>
    </fieldset>
  </form>
</body>
</html>

✔ 결과

type = “number”

  • 숫자 입력 필드. 브라우저에 따라 스핀 박스로 표시됨

type = “range”

  • 숫자 입력 필드. 슬라이드 막대를 이용해 숫자 입력

코드 예시 ) - 스핀 박스, 슬라이드 막대를 사용해 숫자 입력하기

...
<body>
<form>
  <fieldset>
    <ul>
      <li>
        <lable><input type="checkbox" value="s_3">선물용 3kg</lable>
        <!-- 최소 0, 최대 5까지 설정 할 수 있게함 -->
        <input type="number" min="0" max="5">
      </li>
      <li>
        <label><input type="checkbox" value="s_5">선물용 5kg</label>
        <!-- 최소 0, 최대 3까지 설정 할 수 있게함 -->
        <input type="number" min="0" max="3">
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <ul>
      <li>
        <label><input type="checkbox" value="h_3">가정용 3kg</label>
        <!-- 최소 0, 최대 5까지 스크롤 할 수 있고, 초기 설정 값은 1, 1씩 증가(->step) -->
        <input type="range" min="0" max="5" value="1" step="1">
      </li>
      <li>
        <label><input type="checkbox" value="h_5">가정용 5kg</label>
        <!-- 최소 0, 최대 3까지 스크롤 할 수 있고, 초기 설정 값은 1, 1씩 증가(->step) -->
        <input type="range" min="0" max="3" value="1" step="1">
      </li>
    </ul>
  </fieldset>
</form>
</body>
</html>

✔ 결과

📅 달력을 이용해 날짜 입력!

type = “date”

  • 달력에서 날짜를 선택해서 입력할 수 있음. 날짜를 선택하면 필드에 “yyyy-mm-dd” 형식으로 연도, 월, 일이 표시됨.

type = “month”

  • 달력에서 월을 선택해서 입력할 수 있음. 월을 선택하면 “yyyy-mm” 형식으로 연도, 월까지만 입력됨.

type = “week”

  • 달력에서 주를 선택해서 입력할 수 있음. 주를 선택하면 1월 첫째 주를 기준으로 몇 번째 주인지 표시됨.

코드 예시 ) - 3가지 형식의 날짜 입력하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>날짜</title>
</head>
<body>
  <form>
    <fieldset>
      <h3>date</h3>
      <input type="date"><br><hr>
      <h3>month</h3>
      <input type="month"><br><hr>
      <h3>week</h3>
      <input type="week">
    </fieldset>
  </form>
</body>
</html>

✔ 결과 (위쪽부터 date, month, week(→ week은 세 번째 주 입력))


🕛 시간 입력!

type = “time”

  • time은 폼에서 시간을 입력하게 함. 시간 입력 필드는 웹 브라우저마다 조금씩 다르게 나타나는데 항목이 3개로 구성된다는 점은 같음. 첫 번째 항목부터 ‘오전’과 ‘오후’를 의미하고 나머지는 ‘시’와 ‘분’을 의미함.

type = “datetime” or type = “datetime-local”

  • datetime 또는 datetime-local 유형을 사용하면 사용자가 웹 문서를 보고 있는 지역에 맞는 날짜와 시간을 함께 입력할 수 있음.

코드 예시 ) - 3가지 형식의 시간 입력하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>시간</title>
</head>
<body>
  <form>
    <fieldset>
      <h3>time</h3>
      <input type="time"><br><hr>
      <h3>datetime</h3>
      <input type="datetime"><br><hr>
      <h3>datetime-local</h3>
      <input type="datetime-local">
    </fieldset>
  </form>
</body>
</html>

✔ 결과 (위쪽부터 time, datetime, datetime-local)


💠 datetime은 직접 입력함

type = “submit” / type = “reset”

  • 폼 전송/리셋 버튼
  • 전송(submit) 버튼 : 사용자 입력 내용을 서버로 전송
  • 리셋(reset) 버튼 : 사용자 입력 내용 전부 삭제
  • value 속성을 이용해 버튼 표시 내용 지정

type = “image”

  • submit 버튼 대신 이미지 삽입

코드 예시 ) - 전송과 리셋 버튼 추가하기 / 이미지 버튼 추가하기

<!-- submit, reset -->
...
<body>
  <form>
    <fieldset>
      <legend>배송 정보</legend>
      <ul>
        <li>
          <label>이름 <input type="text" size="15"></label>
        </li>
        <li>
          <label>배송 주소 <input type="search" size="15"></label>
        </li>
        <li>
          <label>이메일 <input type="email" size="15"></label>
        </li>
        <li>
          <label>연락처 <input type="tel" size="15" maxlength="11"></label>
        </li>
        <li>
          <label>배송 지정 (주문일로부터 최소 3일 이후)<br>
            <input type="date">
          </label>
        </li>
      </ul>
    </fieldset>
    <input type="submit" value="주문하기">
    <input type="reset" value="취소하기">
  </form>
</body>
</html>
<!-- image -->
...
<style>
  /* 버튼 이미지를 수직으로 정렬하기 위한 style */
  #login-img {
    vertical-align: middle;
  }
</style>
<body>
  <form action="" method="POST">
    <label>아이디: <input type="text" size="10" id="user_id"></label>
    <label>비밀번호: <input type="password" size="10" id="user_id"></label>
    <!-- 이미지 버튼 추가하기  -->
    <input type="image" src="images/login.png" alt="로그인" id="login-img">
  </form>
</body>
</html>

✔ 결과 (위쪽부터 submit/reset, image)

type = “button”

  • 기능 없이 버튼 형태만 삽입
  • 주로 버튼 클릭해서 자바스크립트 실행할 때 사용
  • value 속성을 이용해 버튼 표시 내용 지정

코드 예시 ) - 버튼을 삽입하여 자바스크립트 실행하기

...
  <title>웹 폼</title>
</head>
<body>
  <form>
    <!-- 폼 안에 자바스크립트 실행 버튼 삽입하기 -->
		<!-- onclick의 window.open은 새로운 브라우저를 생기게 해줌 -->
    <!-- height와 width를 사용하여 새로 열린 브라우저를 조절 -->
    <input type="button" value="공지 창 열기" onclick="window.open('notice.html', '_blank', 'width=300, height=400')">
  </form>
</body>
</html>

✔ 결과

type = “file”

  • 파일 첨부
  • ‘파일 선택’이나 ‘찾아보기’ 버튼으로 표시됨

코드 예시 ) - 버튼을 삽입하여 자바스크립트 실행하기

...
  <title>웹 폼</title>
</head>
<body>
  <form>
    <!-- 폼 안에 자바스크립트 실행 버튼 삽입하기 -->
		<!-- onclick의 window.open은 새로운 브라우저를 생기게 해줌 -->
    <!-- height와 width를 사용하여 새로 열린 브라우저를 조절 -->
    <input type="button" value="공지 창 열기" onclick="window.open('notice.html', '_blank', 'width=300, height=400')">
  </form>
</body>
</html>

✔ 결과

type = “hidden”

  • 화면 상의 폼에는 보이지 않음.
  • 폼을 서버로 전송할 때 서버로 함께 전송되는 요소
profile
Pepzera
Hi
이전 포스트

LGHV_3기_웹 문서에 다양한 내용 입력하기_HTML/CSS(4.2)

다음 포스트

LGHV_3기_입력 양식 작성하기_HTML/CSS(5.2)

0개의 댓글