728x90
반응형

 

<input type=" ">
<input type="text">  
<input type="password"> 입력시 마스킹처리됨 ***
<input type="email"> 앞글자 @ 뒤글자 존재해야만 함 email@email.com
<input type="url"> http://글자 하나라도 존재
                             https://글자 하나라도 존재 		  
<input type="tel">  
<input type="radio" name="fruits" value="apple">
<input type="radio" name="fruits" value="pear">
- 단일 선택이 가능한 입력요소
- name같게하여 radio버튼에서 그룹으로 묶여주는 기능 역할
- 그룹을 지정하고자 할 경우에는 반드시 동일한 이름의 name속성을 지정해주어야 한다.
- 반드시 value속성이 존재해야 한다.
- value미기재시 체크한 값은 모두 on으로 값을 전송하므로 어떤 값을 선택했는지에 대한 구분을 할 수x
- 사용자가 선택할 때 어떠한 값인지를 구분하기 위한 라벨이나 텍스트가 존재해야 한다.
- checked : select의 역할, 기본값을 지정한다
- default : 빈값
<input type="checkbox" name="g" value="apple">
- 다중선택이 가능한 입력요소
- 반드시 value속성이 존재해야 한다.
- value속성을 기재하지 않을 경우 체크한 값은 모두 on으로 값을 전송하므로 어떤 값을 선택했는지에 대한 구분을 할 수x
- 사용자가 선택할 때 어떠한 값인지를 구분하기 위한 라벨이나 텍스트가 존재해야 한다.
- name이 같거나 달라도 상관없음.
- 입력요소는 빈값으로 전송시 ""빈문자열이 전송되지만
checkbox는 전송되는 값 자체가 없다.
- checked : select의 역할, 기본값을 지정한다
- default : 빈값

<input type="date" min="1950-01-01" max="2002-08-08">
- 미선택 후 전송시 빈문자열 전송됨
- default : 빈문자열

<input type="time" min="09:00">
- default : 오전
- min/max 값 외 선택시 재입력문구 뜸
<input type="datetime-local">

<input type="number" step="단위값" >
- 정수값만 입력가능
<input type="reset">
- 초기값(value)으로 되돌림		  
<input type="search">
- 검색창 생성

<input type="hidden">
-브라우저상에서 안 보임
-서버로 값이 전송됨		  
<input type="color" value="#00ff00">
- default : 000000, black
  

 

<input type="radio">
<input type="checkbox">
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>웹 폼</title>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>신청 과목</legend>
        <p>이 달에 신청할 과목을 선택하세요(1과목만 가능)</p>
        <input type="radio" id="sub1" name="subject" value="speaking"><label for="sub1"></label>회화</label>
        <label><input type="radio" name="subject" value="grammar">문법</label>
        <label><input type="radio" name="subject" value="writing">작문</label>
      </fieldset>
      
      <fieldset>
        <legend>메일링</legend>
        <p>메일로 받고 싶은 뉴스 주제를 선택해주세요(복수 선택 가능)</p>
        <label><input type="checkbox" name="mailing" value="news">해외단신</label>
        <label><input type="checkbox" name="mailing" value="dialog">5분 회화</label>
        <label><input type="checkbox" name="mailing" value="pops">모닝팝스</label>
      </fieldset>
      <input type="submit" value="전송">
    </form>
  </body>
</html>​

 

<input type="color">
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>웹 폼</title>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>과 티셔츠 설문</legend>
        <p>올해 과 티(T)를 만들려고 합니다. 원하는 색상을 추천해주세요.</p>
        <label>
            <input type="color" name="color1"> /*컬러미지정- 기본값 000000 black*/
            <input type="color" name="color" value="#00ff00"></label>
        <input type="submit" >
      </fieldset>
    </form>
  </body>
</html>​

 

<input type="date">
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>date</title>
</head>
<body>
    <form>
        <h3>조회기간 선택</h3>
        <!-- date는 yyyy-mm-dd형식으로 년,월,일이 표시됨 -->
        <label><input type="date" id="start" name="start" min="1950-01-01" max="2002-08-08"></label>
        <label><input type="date" id="end" name="end"></label>
        <input type="submit" value="전송">
    </form>
</body>
</html>​

 

<input type="time">
<input type="datetime-local">
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>time</title>
</head>
<body>
    <form>
        <h3>대관시간을 선택하세요(오늘)</h3>
        <!-- time은 오전/오후 시간으로 나뉘어 설정 가능. 값은 24시간제로 표시됨. -->
        <label>시작시간
            <input type="time" name="start1" value="09:00">
        </label>,
        <label>종료시간
            <input type="time" name="end1" value="18:00">
        </label>

        <!-- dateime yyyy-mm-dd형식 다음에 시간을 의미하는 T(TimeZone)값이 자동으로 붙음. 
        뒤에 24시간제로 시간 표시됨 -->
        <h3>대관시간을 선택하세요(다른 날짜)</h3>
        <label>시작시간
            <input type="datetime-local" min="2000-01-01T00:00" max="2050-12-31T23:59">
        </label>,
        <br>
        <label>종료시간
            <input type="datetime-local" value="2016-03-02 15:00" name="end2">
        </label>
        <br>
        <input type="submit" value="전송">
    </form>
</body>
</html>​

 

input 예제
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>웹폼</title>
    <style>
        /* body{text-align:right;} */
        legend{font-size:16px; font-weight:900;}
        label{font-size:14px; width:200px; color:#390; font-weight: bold; margin-right:10px;}
        li{list-style: none; margin: 15px 0; font-size:14px;}
    </style>
</head>
<body>
    <h1>여름방학 특강 신청</h1>
    <form>
        <fieldset>
            <legend>수강과목</legend>
            <ul>
                <li>
                    <label for="sub1">영어회화(초급)</label>
                    <input type="text" id="subj" name="subj" value="오전 9:00~11:00" readonly>
                </li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>신청자</legend>
            <ul>
                <li>
                    <label for="uname">이름</label>
                    <input type="text" id="uname" name="uname" autofocus required> 
                </li>
                <li>
                    <label for="uid">학번</label>
                    <input type="text" id="uid" name="uid" placeholder="하이픈없이 입력" minlength="2" maxlength="8" required>
                </li>
                <li>
                    <label for="uclass">학과</label>
                    <select id="uclass" name="uclass">
                        <option value="archi">건축공학과</option>
                        <option value="mechanic">기계공학과</option>
                        <option value="indust">산업공학과</option>
                        <option value="elec">전기전자공학과</option>
                        <option value="computer" selected>컴퓨터공학과</option>
                        <option value="chemical">화학공학과</option>
                    </select>
            </ul>
        </fieldset>
        <fieldset>
            <legend>교재 주문</legend>
            <ul>
                <li><label for="book">교재</label><input type="number" id="book" value="1" min="1" max="3"></li>
                <li><label for="wsheet">워크시트</label><input type="number" id="wsheet" value="1" min="1" max="3"></li>
                <li><label for="group">단체주문</label><input type="number" id="group" value="10" min="10" max="100" step="10"></li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>버튼 선택</legend>
            <button type="submit" value="submit">신청하기</button>
            <button type="reset" value="reset">다시쓰기</button>
        </fieldset>
    </form>
</body>
</html>
NAVER 회원가입 input type분석

 

728x90
반응형
저작자표시 비영리 변경금지

'[HTML]' 카테고리의 다른 글

[HTML] <input 속성 - pattern, name>  (0) 2024.02.16
[HTML] <input 속성 - readonly, autofocus, required, placeholder, disabled, checked>  (0) 2024.02.16
[HTML] form, optgroup, option, datalist, fieldset, legend  (0) 2024.02.15
[HTML] id, #, anchor, svg  (0) 2024.02.15
[HTML] a tag, href, bookmark  (0) 2024.02.14

+ Recent posts

티스토리툴바