코드 그라데이션

6. input 태그 (1) 본문

Front/Mega-HTML

6. input 태그 (1)

완벽한 장면 2023. 5. 12. 09:11

input 태그의 type 속성

 

 

1) type="text", type="password" : 텍스트와 비밀번호를 나타냄

  • 텍스트 필드는 한 줄짜리 일반 텍스트를 입력할 때 사용.
  • 비밀번호 필드는 입력하는 내용을 화면에 보여주지 않아야 하므로, 특수문자를 사용
  • 이 점만 제외하면 텍스트 필드와 똑같이 동작하고, 같은 속성을 사용한다.

 

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

 

예제

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="utf-8">
    <title>로그인</title>
</head>

<body>
    <form>
        <fieldset>
            <label>아이디: <input type="text" id="user" size="10"></label>
            <label>비밀번호: <input type="password" id="user" size="10"></label>
            <input type="submit" value="로그인">
        </fieldset>
    </form>
</body>

</html>

 

실행 결과

 

 

2) type="search", type="url", type="email",  type="tel"   : 용도에 맞게 입력

  • type = "search" 는 검색을 위한 텍스트 필드로 인식
  • type = "url"은 웹 주소를 입력할 필드. type ="email"은 이메일 주소를 입력. 입력값이 지정한 형식에 맞지 않으면 웹 브라우저가 알아서 오류 메시지를 표시한다.
  • type = "tel" 은 전화번호를 입력하는 필드. 전화번호는 지역마다 형식이 다르므로 사용자가 입력한 값이 전화번호인지 아닌지 알 수 없음.
  • 이 필드를 사용하면 모바일 페이지에서 바로 전화를 걸 수 있다. 

예제

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <form action="">
        <fieldset>
            <legend>회원가입</legend>
            <ul>
                <li>
                    <label for="name">이름 </label>
                    <input type="text" id="name">
                </li>
                <li>
                    <label for="address">주소</label>
                    <input type="text" id="address">
                </li>
                <li>
                    <label for="email">이메일</label>
                    <input type="email" id="email">
                </li>
                <li>
                    <label for="phone">연락처</label>
                    <input type="tel" id="phone">
                </li>
            </ul>
        </fieldset>
    </form>
</body>

</html>

 

실행 결과

 

 

3) 체크 박스와 라디오 버튼을 나타내는 type="checkbox", type="radio"

  • 체크 박스와 라디오 버튼은 여러 항목 중에서 원하는 항목을 선택할 때 사용하는 폼 요소
  • 항목을 1개만 선택하려면 라디오 버튼
  • 항목을 2개 이상 선택하려면 체크 박스

 

속성값

 

예제

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>IT 고르기</title>
</head>

<body>
    <h1>IT 고르기</h1>
    <form action="">
        <fieldset>
            <legend>자바 선택</legend>
            <p><b>자바를 선택해 주세요.</b></p>
            <label><input type="checkbox" value="s_3">클래스 별점</label>
            <input type="number" min="0" max="5">개 (최대 5개)

            <label><input type="checkbox" value="s_5">메소드 별점</label>
            <input type="number" min="0" max="5" value="1">개 (최대 5개)

            <label><input type="checkbox" value="f_5">반복문 별점</label>
            <input type="range" min="0" max="5">개 (최대 5개)

            <label><input type="checkbox" value="f_5">조건문 별점</label>
            <input type="range" min="0" max="5" value="1">개 (최대 5개)
            
            <p><b>HTML 좋아요 싫어요</b></p>
            <label><input type="radio" name="gift" value="yes">좋아요</label>
            <label><input type="radio" name="gift" value="no">싫어요</label>
        </fieldset>
    </form>
</body>

</html>

 

실행 결과

 

 

4) type="number", type="range" : 숫자 입력 필드를 나타냄

  • 전자를 사용하면 스핀 박스가 나타나면서 숫자를 선택할 수 있다.
  • 후자는 슬라이드 막대를 움직여 숫자를 선택할 수 있다.

속성값

 

예제

<!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">Attention</label>
          <input type="number" min="0" max="5">개 (최대 5개)
        </li>
        <li>
          <label><input type="checkbox" value="s_5">Hype boy</label>
          <input type="number" min="0" max="3" value="1">개 (최대 3개)
        </li>
      </ul>
      <!-- 슬라이드 막대로 숫자 입력 -->

      <ul>
        <li>
          <label><input type="checkbox" value="f_3">OMG</label>
          <input type="range" min="0" max="5">개 (최대 5개)
        </li>
        <li>
          <label><input type="checkbox" value="f_3">교통카드</label>
          <input type="range" min="0" max="3" value="1">개 (최대 3개)
        </li>
      </ul>      
      <p><b>포장 선택</b></p>
      <ul>
        <li><label><input type="radio" value="yes">선물 포장</label></li>
        <li><label><input type="radio" 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>

 

실행 결과

 

5) type="date", type="month" : 날짜 입력

 

6) type="date", type="month" : 날짜 입력

 

예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <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="2023-02-01" max="2023-05-15">
        <input type="time" min="14:00" max="16:00">
    </form>
</body>

</html>

 

실행 결과

 

7) type="submit", type="reset" : 전송, 리셋 버튼

  • 전자는 폼에 입력한 정보를 서버로 전송한다.
  • 이 버튼으로 전송된 정보는 <form> 태그의 action 속성에서 지정한 폼 처리 프로그램에 넘겨진다.
  • 후자는 <input> 요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지우는 역할을 한다.
  • 이 때 value 속성을 사용해서 버튼에 표시할 내용을 지정한다.

 

예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>뉴진스</title>
</head>
<body>
  <h1>뉴진스 앨범 주문하기</h1>
  <div id="container">
    <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>      
        </ul>  
      </fieldset>
      <div>
        <button type="submit">주문하기</button> 
        <button type="reset">취소하기</button>
      </div>        
    </form>
  </div>
</body>
</html>

 

실행 결과

 

8) 이미지 버튼을 나타내는 type="image"

  • "submit" 버튼과 같은 기능을 하는 이미지 버튼을 나타낸다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="utf-8">
    <title>로그인</title>
    <style>
        input[type="image"] {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <form>
        <fieldset>
            <label>아이디: <input type="text" id="user" size="8"></label>
            <label>비밀번호: <input type="password" id="pw" size="8"></label>
            <input type="image" width="50" height="50" src="images/로그인.png" alt="로그인">
        </fieldset>
    </form>
</body>

</html>

 

실행 결과

 

9) 기본 버튼을 나타내는 type="button"

  • "submit" 이나 "reset" 기능이 없는 버튼 형태 삽입

 

10) 파일 첨부할 때 사용하는 type="file"

  • 이 유형을 사용하면 웹 브라우저 화면에 [파일 선택] 이나 [찾아보기] 버튼 등이 표시된다.
  • 이 때 이 버튼을 클릭하고 파일을 선택하면 파일이 첨부된다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>뉴진스</title>
  <link rel="stylesheet" href="css/order-form.css">
</head>
<body>
  <h1>사연 응모하기</h1>
  <form>
    <fieldset>
      <legend>활동 정보</legend>
      <p>만일 자기만의 <b>뉴진스와 관련된 추억</b>이 있다면 알려주세요.</p>
      <p>파일로 첨부해 주시면 됩니다.</p>
      <hr>
      <input type="file">    
    </fieldset>
    <div>
      <input type="submit" value="제출하기"> 
      <input type="reset" value="취소하기">
    </div>        
  </form>
</body>
</html>

 

실행 결과

 

11) 히든 필드를 만들 때 사용하는 type="hidden"

  • 화면에 있는 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소
  • 사용자에게 굳이 보여줄 필요는 없지만 관리자가 알아야 하는 정보는 이 필드로 입력한다.

728x90

'Front > Mega-HTML' 카테고리의 다른 글

8. 폼에서 사용하는 여러 태그들  (0) 2023.05.12
7. input 태그의 주요 속성  (0) 2023.05.12
5. 폼 삽입하기  (0) 2023.05.12
4. 이미지, 오디오, 비디오, 하이퍼링크 삽입하기  (0) 2023.05.12
3. 목록과 표 만들기  (0) 2023.05.12
'Front/Mega-HTML' Related Articles more
Comments