5. 입력 양식 작성하기

진도장 2023. 2. 5. 16:55

2023. 2. 5. 16:55

5-1 입력양식 작성하기

폼 : 웹 상에서 사용자의 정보를 받아들이는 형식

ex) 검색창, 로그인 id, 비밀번호 창

-폼에 입력되는 정보는 웹 브라우저가 알아서 처리하는 게 아니라 웹 브라우저가 서버로 넘겨주는 역할까지만 수행함

-처리하는 것은 서버의 프로그램임

-많은 서버의 기능 중에서 액션이라는 속성--> 기능의 이름을 적어서 적용함

(이 내용은 서버의 내용이기 때문에 생략함)

-입력할 때는 <input>태그를 사용해주고 안의 속성에 맞게 type을 설정하면 된다

-<label>은 내용과 필드를 연결해주는 기능을 한다

폼

폼 : 웹 상에서 사용자의 정보를 받아들이는 형식

ex) 검색창, 로그인 id, 비밀번호 창

-폼에 입력되는 정보는 웹 브라우저가 알아서 처리하는 게 아니라 웹 브라우저가 서버로 넘겨주는 역할까지만 수행함

-처리하는 것은 서버의 프로그램임

-많은 서버의 기능 중에서 액션이라는 속성--> 기능의 이름을 적어서 적용함

(이 내용은 서버의 내용이기 때문에 생략함)

-입력할 때는 <input>태그를 사용해주고 안의 속성에 맞게 type을 설정하면 된다

-<label>은 내용과 필드를 연결해주는 기능을 한다

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹 폼 삽입하기</title>
</head>
<body>
    <form action="">
        <label>아이디:<input type="text"></label>
        <!-- label태그를 따로 사용하는 경우 :<label for="user-id">아이디:</label> 
        <input type="text" id="user-id"> -->
        <label>비밀번호:<input type="password"></label>
        <input type="submit" value="로그인">
    </form>
</body>
</html></html>

html5로 넘어오면서 과거에는 input의 type을 text로 했었으나 좀 더 세분화 해서 적용을 하게 됨.

ex)email, password, id

5-2

라디오 체크박스 버튼

<!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>

체크박스는 두개 이상을 선택할 수 있고 라디오 버튼은 하나만 선택할 수 있음

input 안에 value 값을 지정해주어야 함

라디오에서 같은 그룹에서 선택을 하기 위해서는 이름을 똑같이 해주어야 함

number

체크박스 내부에서 화살표를 이용해서 범위를 설정할 수 있는 기능

range

체크박스 내부에서 슬라이드를 이용해서 범위를 설정할 수 있는 기능

(설정할 때 정확한 값을 확인하고 싶은 경우에는 js를 이용해야 함)

Min Max를 활용해서 범위의 한도를 설정할 수 있음

<!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" min="0" max="5">개 (최대 5개)
        </li>
        <li>
          <label><input type="checkbox" value="s_5">선물용 5kg</label>
          <input type="number" min="0" max="3" value="1">개 (최대 3개)
        </li>
      </ul>
      <ul>
        <li>
          <label><input type="checkbox" value="f_3">가정용 3kg</label>
          <input type="range" min="0" max="5">개 (최대 5개)
        </li>
        <li>
          <label><input type="checkbox" value="f_5">가정용 5kg</label>
          <input type="range" min="0" max="3" value="1">개 (최대 3개)
        </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 id="shipping">
        <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>
    <div>
      <input type="submit" value="주문하기"> 
      <input type="reset" value="취소하기">
    </div>        
  </form>
</body>
</html>

날짜 표시 기능

과거에는 자바스크립트를 이용해야만 날짜를 표시할 수 있었으나

이제는 date, month, week 등을 활용해서 기능을 구현 할 수 있다

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>날짜와 시간</title>
</head>
<body>
  <form>
    <h1>날짜 지정하기</h1>
    <input type="date">
    <input type="month">
    <input type="week">
    <hr>
    <h1>시간 지정하기</h1>
    <input type="time">
    <input type="datetime-local">
    <hr>
    <h1>범위 제한하기</h1>
    <input type="date" min="2020-02-01" max="2020-02-15">
    <input type="time">
  </form>
</body>
</html>

hidden

사용자에게는 보여지지는 않지만 폼양식과 함께 서버로 보내지는 정보

사용자가 입력하는 정보가 아닌 웹 브라우저가 수집하는 정보들

<!DOCTYPE html>
<html lang="ko">
  <head>
		<meta charset="UTF-8">
		<title>로그인</title>
  </head>
  <body>
	<form>
    <fieldset>
      <input type="hidden" name="url" id="url" value="사이트를 통한 직접 로그인">
    	<label>아이디: <input type="text" id="user_id" size="10"></label>
      <label>비밀번호: <input type="password" id="user_pw" size="10"></label>
      <input type="submit" value="로그인">
    </fieldset>
  </form>
  </body>
</html>

5-3 input 태그의 주요 속성

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>레드향 주문하기</title>
  <link rel="stylesheet" href="css/form2.css">
</head>
<body>
  <h1>레드향 주문하기</h1>
  <form>
    <fieldset>
      <legend>배송 정보</legend>
      <ul id="shipping">
        <li>
          <label for="prod">주문 상품</label>
          <input type="text" id="prod" value="상품용 3KG" readonly>
        </li>
        <li>
          <label for="user-name">이름 </label>
          <input type="text" id="user-name" autofocus required>
        </li>
        <li>
          <label for="addr">배송 주소</label> 
          <input type="text" id="addr" required>
        </li>
        <li>
          <label for="mail">이메일</label>
          <input type="email" id="mail">
        </li>        
        <li>
          <label for="phone">연락처</label>
          <input type="tel" id="phone" placeholder="하이픈 빼고 입력해 주세요.(01012345678)" required>
        </li>
        <li>
          <label for="d-day">배송 지정</label>
          <input type="date" id="d-day"> <small>(주문일로부터 최소 3일 이후)</small>
        </li>        
      </ul>  
    </fieldset>
    <div>
      <input type="submit" value="주문하기"> 
      <input type="reset" value="취소하기">
    </div>        
  </form>
</body>
</html>

required

꼭 입력해야하는 것을 나타내 주는 속성

입력하지 않으면 꼭 입력해야함을 표시해줌

readonly

수정이 불가능하고 사용자가 읽을 수 있게만 하기 위한 속성

autofocus

사용자가 가장 먼저 접근할 만한 곳에 커서를 두는 속성

textarea

여러줄의 text를 입력하고 싶을 때 사용 cols와 row를 설정해서 사용하면 된다

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>레드향 주문하기</title>
  <link rel="stylesheet" href="css/order.css">
</head>
<body>
  <div id="container">
    <h1>레드향 주문하기</h1>
    <form>
      <fieldset>
        <legend>배송 정보</legend>
        <ul id="shipping">
          <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>
          <li>
            <label for="d-day">배송 지정</label>
            <input type="date" id="d-day"> <small>(주문일로부터 최소 3일 이후)</small>
          </li>     
          <li>
            <label for="memo">메모</label>
            <textarea id="memo" cols="40" rows="4"></textarea>
          </li>   
        </ul>  
      </fieldset>
      <div>
        <input type="submit" value="주문하기"> 
        <input type="reset" value="취소하기">
      </div>        
    </form>
  </div>
</body>
</html>

select

여러 항목 중에서 선택할 수 있는 속성

그 안에는 option태그를 사용해서 사용 그리고 서버로 넘겨 주는 값은 value를 이용해서 설정해 준다

선택된 값에는 selecte가 붙는다

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>레드향 주문하기</title>
</head>
<body>
  <h1>레드향 주문하기</h1>
  <form action="">
    <fieldset>
      <legend>상품 선택</legend>
      <p><b>주문할 상품을 선택해 주세요.</b></p>
      <label>
        <select>
          <option value="special_3" selected>선물용 3kg</option>
          <option value="special_5">선물용 5kg</option>
          <option value="family_3">가정용 3kg</option>
          <option value="family_5">가정용 5kg</option>
        </select>
      </label>
    </fieldset>
    <fieldset>
      <legend>상품 선택</legend>
      <p><b>주문할 상품을 선택해 주세요.</b></p>
      <label><input type="text" list="goods"></label>
      <datalist id="goods">
        <option value="special_3">선물용 3kg</option>
        <option value="special_5">선물용 5kg</option>
        <option value="family_3">가정용 3kg</option>
        <option value="family_5">가정용 5kg</option>
      </datalist>      
    </fieldset>      
  </form>
</body>
</html>

'web-frontend' 카테고리의 다른 글

4. 웹 문서에 다양한 내용 입력하기 (0)	2023.01.08
3. HTML 기본 문서 만들기 (0)	2023.01.08
2. 웹 개발 환경 설정 (0)	2023.01.08
1. 웹 개발 시작하기 (0)	2023.01.08

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

DJ pupm this party