so woon!

tag (input) 본문

HTML/개념정리

tag (input)

xowoony 2022. 8. 27. 20:51

 태그(form)
- 중요도 : 🔴🔴🔴🔴🔴
- 종류 : 닫는 태그 필요
- form태그(양식 태그)는 서로 관련있는 input, select 등의 사용자 입력 값을 받는 태그 들을 묶어내는 역할을 한다. (로그인 폼, 회원가입 폼 등...)


 태그(label) 
- 중요도 : 🔴🔴🔴🔴⚪
- 종류 : 닫는 태그 필요
- label태그는 input태그를 감싸서 해당 input의 간략한 정보나 종류를 전달하기 위해 사용한다.


 태그(select) 
- 중요도 : 🔴🔴🔴🔴🔴
- 종류 : 닫는 태그 필요
- select태그는 드롭다운(Drop Down)방식의, 주어진 선택지 중 하나만 선택할 수 있게끔하는 태그이다. (input의 radio와 역할은 같음)
- 속성
  - name : (상당히 중요) 사용자가 입력한 값을 서버가 식별하기 위해 사용하는 식별자다.


 태그(option) 
- 중요도 : 🔴🔴🔴🔴🔴
- 종류 : 닫는 태그 필요
- option태그는 <select>태그의 구성 요소이다. 표시 텍스트는 태그 안에, 해당 선택지의 값은 value 속성을 이용한다.
- 속성
  - disabled : 해당 option을 선택하지 못하도록 한다. 속성값은 부여하지 않는다.
  - selected : 해당 option이 선택된 상태로 초기화한다. 속성값은 부여하지 않는다.
  - value : 해당 option을 선택했을 경우 실제 서버로 전송할 값.


 태그(optgroup) 
- 중요도 : 🔴🔴⚪⚪⚪
- 종류 : 닫는 태그 필요
- 유사한 <option>을 묶어내는 역할을 하나, 이는 시각적 요소에 국한되어 있고 실제 역할은 없다고 할 수 있다.
- 속성
  - label : 표시할 텍스트를 지정한다.

 태그(input) 
- 중요도 : 🔴🔴🔴🔴🔴
- 종류 : 자동으로 닫는 태그
- input태그는 사용자에게 값을 받는 용도로 사용된다.
- 입력 받은 값은 주로 서버로 전송한다.
- 속성
  - autofocus : 페이지가 로드되었을 때 해당 속성을 가진 input요소가 포커스를 가지게한다. 속성 값은 부여하지 않는다.
  - checked : type이 checkbox이거나 radio인 경우 선택(체크)된 상태로 지정한다. 속성 값은 부여하지 않는다.
  - disabled : 해당 input요소를 사용하지 못하게한다. 속성 값은 부여하지 않는다.
  - max : type이 number인 경우 그 값의 최대값을 지정한다.
  - min : type이 number인 경우 그 값의 최소값을 지정한다.
  - maxlength : 값의 최대 길이
  - minlength : 값의 최소 길이
  - multiple : type이 file인 경우 파일을 두 개 이상 선택할 수 있게 한다. 속성값은 부여하지 않는다.
  - name : (상당히 중요) 사용자가 입력한 값을 서버가 식별하기 위해 사용하는 식별자다.
  - pattern : (안 중요) 정규식(Regular Expression)을 통해 값을 필터한다.
  - placeholder : 값이 비어 있을때 표시할 힌트 메세지.
  - readonly : 해당 input의 값을 변경하지 못하게 한다. 속성 값은 부여하지 않는다.
  - required : 빈 값을 허용하지 않음. 속성 값은 부여하지 않는다.
  - value : 버튼(button, reset, submit)이 아닐때, 초기 값을 지정한다. 버튼의 경우 표시할 버튼 텍스트를 지정한다.
  - type : input태그의 종류를 지정한다. 가능한 값은 아래와 같다.
              - "button" : 그냥 버튼. 아무일도 안 함.
              - "checkbox" : 체크박스 필드. 여/부 값을 받기 위해 사용한다.
              - "email" : 이메일 필드. 입력 받는 값이 이메일이라면 반드시 해당 타입 값 사용.
              - "file" : 파일 필드. 주로 파일을 업로드할 때 사용한다. (프로필 사진 선택, 첨부파일 추가 등)
              - "number" : 숫자를 입력받기 위한 필드.
              - "password" : 비밀번호 필드. 입력 문자가 보이지 않음.
              - "radio" : name 속성 값이 같은 radio 중에 하나만 선택하게 하기 위해 존재.
              - "reset" : 초기화 버튼. 해당 초기화 버튼이 포함되어 있는 <form> 태그 내부의 모든 input의 값을 초기화한다.
               - "submit" : 제출 버튼. 해당 제출 버튼이 포함되어 있는 <form> 태그 내부의 모든 값을 서버로 전송한다. 
                                (로그인, 회원가입, 글 작성 버튼 등)
               - "tel" : 연락처 필드. 입력 받는 값이 연락처라면 반드시 해당 타입 값 사용.
               - "text" : 일반 텍스트. type 속성 생략시 기본값.

<form>
    <!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>INPUT 태그</title>
    </head>
    <body>
       <input type="password">
       <br>
       <input type="email">
       <br>
       <input type="text">
       <br>
       <input type="file">
       <br>
       <input type="number">
       <br>
       <input type="checkbox">
       <br>
       <input type="radio">KT
       <br>
       <input type="radio">LGU+
       <br>
       <input type="radio">SKT
       <br>
       <input name="s" type="radio">여자
       <input name="s" type="radio">남자
       <br>
       <input type="button">
       <label>
        <a>약관을 읽어보았으며 동의합니다</a>
        <input type="checkbox">
        </label>
       <br>
       <label>
            <a>이메일 : </a>
            <input name="e" type="email">
        </label>
        <br>
        <label>
            <a>이메일 : </a>
            <input autofocus name="e" type="email">
        </label>
        <br>
       
        <label>
            <a>이메일 : </a>
            <input disabled name="e" type="email">
        </label>
        <br>
        <label>
            <a>비밀번호 : </a>
            <input name="bimil" placeholder="비밀번호를 입력하세요" type="password">
        </label>
        <br>
        <label>
            <input checked disabled name="jadong" type="checkbox">
            <a>자동로그인 </a>
        </label>
        <br>
        <label>
            <a>보안 문자 입력 : </a>
            <input pattern="^([0-9a-z]{6})$" type="text">
        </label>
        <br>
        <label>
            <input max="28", min="20" name="age" type="number">
        </label>
        </br>
        <label>
            <input name="bimil" type="checkbox">
            <a>자동로그인 </a>
        </label>
        <br>
        <input type="reset" value="다시 입력">
        <input type="submit" value="로그인하기">


        <br>
        <select name="food">
            <option value="" selected disabled>음식을 선택하세요</option> <!--selected앞에 hidden을 넣으면 없어짐-->
            <option value="misc">기타</option>
            <optgroup label="한식">
                <option value="bibimbab">비빔밥</option>   <!--실제로 선택가능한 목록들-->
                <option value="bulgogi">불고기</option>
                <option value="namgmyeon">냉면</option>
            </optgroup>
            <optgroup label="중식">
                <option value="jjajangmyeon">짜장면</option>
                <option value="jjambbong">짬뽕</option>
                <option value="bokumbab">볶음밥</option>
            </optgroup>
            <optgroup label="일식">
                <option value="sushi">스시</option>
                <option value="tonkatsu">돈까스</option>
            </optgroup>
        </select>
       
    </body>
</html>
</form>
 
========================실행결과==========================
 

저작자표시 비영리 변경금지

'HTML > 개념정리' 카테고리의 다른 글

tag (table, caption, thead, tbody, tfoot, tr, th, td)  (0) 2022.08.27
tag (ol, ul, li)  (0) 2022.08.27
tag (div, span, main, nav, header, footer, section, article, aside)  (0) 2022.08.27
경로 (Path)  (0) 2022.08.27
tag (iframe)  (0) 2022.08.25
'HTML/개념정리' Related Articles more
Comments