본문 바로가기
HTML & CSS & JavaScript/HTML

★★ 입력 관련 태그 ★★

mook_mook 2024. 12. 14. 15:54

▶ input 태그, form 태그

  • input 태그
    - 웹 문서에서 사용자가 입력할 수 있는 양식을 제공하는 태그

  • text 관련 input 태그
    - type="text"
    : 한 줄짜리 문자열(텍스트)을 입력할 수 있는 입력 상자
    : input 태그의 type 기본값으로 생략 가능
    : inline 형식(모든 input 태그는 inline)
<input type="text">
<input>
  • text 관련 input 태그의 공용 속성
    - size : 입력 상자의 크기
    - maxlength : 입력 받는 텍스트의 최대 길이
    - placeholder : 입력 상자에 작성될 내용을 설명
아이디 : <input type="text" size="15" maxlength="10" placeholder="아이디 입력"> <br>
비밀번호 : <input type="text" size="15" maxlength="10" placeholder="비밀번호 입력">
아이디 :
비밀번호 :
  • type="password"
    - 비밀번호 입력 상자(입력되는 텍스트를 가려줌)
비밀번호 : <input type="password">
비밀번호 :
  • type="url"
    - 주소 입력 시 사용하는 입력상자
홈페이지 : <input type="url" value="https://">
<!-- value : 모든 input 태그의 type에서 사용 가능한 속성 / input 태그에 들어갈 초기값을 지정 -->
홈페이지 :
  • type="email"
    - 이메일 입력 시 사용하는 입력 상자
이메일 : <input type="email" size="30">
이메일 :
  • type="tel"
    - 전화번호 입력 시 사용하는 입력 상자
전화번호 : <input type="tel" size="30" placeholder="'-' 기호 포함">
전화번호 :
  • type="search"
    - 검색어 입력 시 사용하는 입력 상자
검색어 입력 : <input type="search" size="30">
<!-- url, email, tel 단독 사용 시 type = "text"와 똑같지만
     form 태그 내부에 사용 되면 입력된 값이 용도에 맞는 값인지 유효성 검사를 간단히 진행함 -->
검색어 입력 :
  • 숫자 관련 input 태그
    - 숫자 관련 태그 공용 속성
    1) min : 최소값
    2) max : 최대값
    3) step : 증가 / 감소 단계 지정

  • type="number"
    - 숫자만 입력할 수 있는 입력 상자
    - 브라우저에 따라 스핀박스가 표시되기도 함
점수 입력 : <input type="number" min="0" max="100" step="5" value="50">
점수 입력 :
  • type="range"
    - 슬라이드 바를 이용해서 숫자 지정(단독 사용 X, JavaScript와 같이 사용)
<input type="range" min="0" max="50" step="10">
  • 날짜 / 시간
    : type="date / month / week / time / datetime-local"
    <ul>
        <li><input type="date"></li>
        <li><input type="month"></li>
        <li><input type="week"></li>
        <li><input type="time"></li>
        <li><input type="datetime-local"></li>
    </ul>
  • radio와 checkbox
    - 여러 관련된 값을 묶어서 선택하는 경우에 사용하는 input type
    - 묶음으로 다루려는 input 태그들은 반드시 name 속성 값을 가져야 함!

    ★ name 속성
    1) radio, checkbox뿐만 아니라 input 태그들 중 관련된 것들을 묶어서 부를 때(묶음으로 다룰 때) 사용
       ( == 그룹 이름)
    2) 서버 쪽에 제출되는 input 태그 값의 이름을 지정(form 태그와 같이 사용

  • type="radio"
팀 선택 <br>
<input type="radio" name="team" id="a-team"><label for="a-team">A팀</label>
<input type="radio" name="team" id="b-team"><label for="b-team">B팀</label>
<input type="radio" name="team" id="c-team"><label for="c-team">C팀</label>
팀 선택
  • type="checkbox"
    <h5>취미 선택</h5>
    <label><input type="checkbox" name="hobby">클라이밍</label>

    <label><input type="checkbox" name="hobby">축구</label>

    <label><input type="checkbox" name="hobby">등산</label>
취미 선택
  • 기타 input 태그
    type="color"
    type="file"
    type="hidden"
<h3>기타 input 태그</h3>
type = "color" : <input type="color"> <br>
type = "file" : <input type="file"> <br>
type = "hidden" : <input type="hidden" value="여기 값 있어요!" id="hd1"> <br>
<!-- 화면 상에서 보이지는 않지만 존재하는 input 태그
     -> 언제 사용? 필요한 값이지만 화면에 보일 필요는 없을 때(ex. 회원번호) -->
type = "color" :
type = "file" :
type = "hidden" :
  • form 태그
    - div와 같은 영역(block 형식)
      + 내부에 작성된 input 태그의 값을 서버로 전달하는 역할(단, name 값이 있어야 가능)
    - 속성
    1) action : 내부에 작성된 값을 전달할 서버 또는 페이지 주소를 작성
    2) method(방식) : 서버로 데이터를 전달하는 방식을 지정하는 속성
    3) name : form 태그의 이름을 지정하여 각각의 form 태그 구분(JavaScript 사용)
    4) target : action에 지정된 주소를 새탭 / 현재탭 중 어디에서 열지 지정

  • form 태그 예시 1
<form>
   아이디 입력 : <input type="text" name="id">
   <button>제출</button>
   <!-- 주소?id=user01
        ? : 제출된 값을 나타내는 문자열의 시작부분
        id : input 태그 name 속성값
        user01 : input 태그에 입력한 값(value)
        id = user01 : name 속성 값이 'id'인 input 태그에 작성된 값이 'user01'이다. -->
</form>
아이디 입력 :
  • form 태그 예시 2
<form action="">
<!-- action 기본값 : 현재 페이지 주소
     actioon = "제출할 서버 또는 페이지 주소" -->
        
이름 : <input type="text" name="inputName"><br>
나이 : <input type="number" name="inputAge"><br>

<!-- action 주소로 제출하는 버튼 기본값 : submit -->

<button type="submit">제출</button>
</form>
이름 :
나이 :
  • form 태그 예시 3
    <form action="" target="_blank">
        팀 선택 <br>
        <input type="radio" name="team" id="a-team" value="A"><label for="a-team">A팀</label>
        <input type="radio" name="team" id="b-team" value="B"><label for="b-team">B팀</label>
        <input type="radio" name="team" id="c-team" value="C"><label for="c-team">C팀</label>
        
        <br><br>

        취미 선택<br>
        <label><input type="checkbox" name="hobby" value="클라이밍">클라이밍</label>
        <label><input type="checkbox" name="hobby" value="축구">축구</label>
        <label><input type="checkbox" name="hobby" value="등산">등산</label>

        <button>제출</button>
    </form>
    
   <!-- radio, checkbox 선택 시 전달되는 값이 'on'으로 나오는 이유
       : 선택된 input 태그에 아무런 값을 작성하지 않은 경우(value를 작성 안 한 경우)
         체크는 되었다라고 인식해서 'on'이라는 단어로 표현
    
        * 해결 방법 : input 태그에 value 속성 추가!
    -->
팀 선택


취미 선택
  • fieldset / legend
    - fieldset : 테두리를 만들어 그룹을 구분하는 영역
    - legend : fieldset 테두리에 이름을 부여
    <form action="" target="_blank">
        <fieldset>
            <legend>회원가입</legend>
            아이디 : <input type="text" name="memberId"><br>
            비밀번호 : <input type="password" name="memberPw">
        </fieldset>
        <button type="submit">가입하기</button>
    </form>
회원가입 아이디 :
비밀번호 :
  • 버튼을 나타내는 input 태그
    - input 태그 중 type="submit / reset / button"
      위 3개가 버튼을 나타내는 타입이지만 잘 사용되지 않음
      왜? 버튼의 사용도가 많아져서 별도의 button 태그가 새롭게 등장함
    <form>
        <input type="text" name="1">
        <input type="text" name="2">
        <input type="text" name="3">
        <input type="text" name="4">
        <br>

        <!-- <input type="submit"> -->
        <button type="submit">제출</button>
        <button type="reset">초기화</button>
        <!-- reset 버튼이 포함된 form 태그 내부 input 값을 모두 초기화 -->

        <button type="button" id="btn1">그냥 버튼</button>
        <!-- 아무런 기능이 없는 버튼 -> JavaScript를 이용해서 원하는 기능을 추가할 수 있음 --> 

        <script>
            // 자바스크립트 작성 영역
            document.getElementById("btn1").addEventListener("click",function(){
                alert("그냥 버튼 클릭!");
            })
        </script>
    </form>

  • textarea / select, option
    - textarea 태그 : 여러 줄을 입력하기 위한 입력 상자
<form action="" target="_blank">
<!-- rows : 행의 개수(== 텍스트 영역의 세로 폭을 설정) 
     cols : 열의 개수(== 텍스트 영역의 가로 폭을 설정) 
     -> 화면에 보이는 크기를 지정 -->
   <textarea name="tt" rows="5" cols="70" style="resize: none;" placeholder="placeholder도 작성 가능. &#13;&#10;!!">제목 : textarea 태그 공부중</textarea>
   <button>제출하기</button>
</form>
  • select, option
<form action="">
        <select name="sel">
            <option value="1">선택1</option>
            <option value="2" selected>선택2</option>
            <option value="3">선택3</option>
            <option >선택4</option>
        </select>
        <!-- select 제출 시
             option 태그에 value가 있을 경우 : value에 작성된 값 
             option 태그에 value가 없을 경우 : option 시작 / 종료 태그 사이에 작성된 내용

             selected 속성 : select의 기본 값을 설정하는 속성
        -->

        <br>
        <input type="radio" checked>
        <input type="checkbox" checked>
        <!-- checked 속성 : chekckbox / radio 체크해두는 속성 -->

        <button>제출하기</button>
</form>

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

하이퍼 링크 관련 태그  (0) 2024.12.14
이미지 관련 태그  (0) 2024.12.14
★★ 영역 관련 태그 ★★  (0) 2024.12.14
표 관련 태그  (0) 2024.12.11
목록 관련 태그  (0) 2024.12.11

'HTML & CSS & JavaScript/HTML' Related Articles

티스토리툴바