HTML Tag 모음과 활용 예시3 - <input>

[Input Tag]

 

1. 속성 
  - type : 타입 지정
      - "text" : 글상자(textfield)
                 자바에서 setText()

      - "password" : 입력 시, 암호화 되어 *로 표시

      - "email" : 이메일

      - "tel" : 전화번호

      - "month" : 년월

      - "week" : 년월주

      - "date" : 년월일

      - "time" : 시간 

      - "datetime-local" : 년월일 시간

      - "color" : 색상표

      - "number" : 숫자만 입력

      - "range" : 범위설정

      - "url" : url 주소로 이동(http://가 없으면 입력하라고 나옴)

      - "search" : 검색(크롬이나 사파리에서 검색 끝에 X표시 나옴)
      - "submit" : 서버로 전송 버튼
      - "reset" : 입력 값 취소 버튼

  - name = "" : Tag의 이름 지정
  - value = "" : 초기값
                   GUI에서 setText() 
  - autofocus : 자동으로 칸 지정되어 커서 입력
  - required : 반드시 입력값 있도록 지정(입력값 미 입력시 경고문 뜸)
  - placeholder ="" : 입력 형식 샘플
  - readonly : 사용자가 수정 불가능
                  하도록 지정
  - size : 입력란에 보여지는 문자
            최대 길이

  - min : 최소값

  - max : 최대값
  - maxlength : 최대 입력 길이

  - step : 단위

 

<form action="hello.jsp" method = "get">
  &nbsp;이름<input type="text" name = "이름" autofocus required placeholder = "홍길동">
  &nbsp;비밀번호(10자리 이내)<input type="password" name = "비밀번호" size = "10" maxlenth = "10"                                                                                                                           required><br /></input>
  &nbsp;이메일<input type="email" name = "이메일" required placeholder = "abc@def.com"><br /></input>
  &nbsp;전화번호<input type="tel" name = "전화번호" required placeholder = "000-0000-0000"><br /></input>
  &nbsp;생일년월<input type="month" required><br /></input>
  &nbsp;생일년월일<input type="date" name = "생년월일" required><br /></input>
  &nbsp;생일년월일(2000년 이상 가입안됨)<input type="date" min = "1900-01-01" max = "1999-12-31" required>                                                                                                                                   <br /></input>
  &nbsp;생일은 1년 중 몇번째 주<input type="week" required><br /></input>
  &nbsp;태어난 시간<input type="time" required><br /></input>
  &nbsp;현재 local time<input type="datetime-local" required><br /></input>
  &nbsp;좋아하는 색<input type="color" required onchange = "document.body.style.backgroundColor =                                                                                                                               this.value"><br /></input> 
  &nbsp;좋아하는 숫자(0~100, 10단위)<input type="number" min = "0" max = "100" step = "10" required><br />                                                                                                                                            </input>
  &nbsp;성격(내성적-외향적)<br />
  &nbsp;내성적<input type="range" min = "1" max = "100" step = "10" required></input>외향적<br />
  &nbsp;나의 홈페이지 주소<input type="url" required><br /></input>
  &nbsp;검색<input type="search" placeholder = "검색 입력창"><br /></input>
  &nbsp;<input type="submit" value = "서버 전송"></input>&nbsp;
<input type="reset" value = "초기화"><br /></input>
</form>

 

 

[.html 실행 예시]