다루두루

블로그 이미지

차케요

공부하면서 정리하는 노트같은 블로그입니다.

HTML5 input type

HTML 공부 2014. 12. 14. 00:58


input type 인터넷을 이용할 때 어딘가에 로그인하기 위해서 아이디와 비번을 입력하고 로그인 버튼을 클릭하게 되는데요. 이런 입력란이나 버튼 등은 모두 HTML5 input type 태그로 이루어져 있는데요. 이 input type 태그를 이용하는 속성이 생각보다 많습니다. 일단 어떤 것들이 있는지 쭉 나열해보고, 이번 글에서는 한 두개만 살펴보고 다음 글에 계속 이어서 정리해볼게요. 먼저 input type 속성을 이용하는 유형은 hidden, text, search, tel, url, reset, image, submit, file, button, time, week, month, date, datetime-local, datetime, radio, checkbox, color, range, number, password, email 등 유형이 많죠? ㅎ 이것들은 한 번에 모두 정리하기에는 무리가 있을 테니까 가장 기초적인 요소부터 하나씩 정리해볼게요. 


■ <input-type="text">

이 text 요소가 아마도 가장 많이 쓰이는 input type 일 겁니다. 대부분 아이디나 비번, 이름, 주소 등을 입력할 때 이 text 요소를 이용하게 됩니다. 이 요소의 형식은 다음과 같습니다. 

<input type="text" size-"10 " value="초기출력내용 " maxlength="8 ">

이 요소의 속성 중에 대표적인 게 size와 value 그리고 maxlength 인데요. size는 텍스트 필드의 길이를 지정하는 속성이구요. value는 처음 텍스트 필드에 표시되는 값을 입력해줄 수 있습니다. 이 값을 입력하지 않으면 빈 입력란으로 표시가 됩니다. 마지막으로 matlength는 입력할 수 있는 최대 개수를 의미합니다. 


■ <input type ="password">

이 유형의 단어에서도 알 수 있듯이 비밀번호 입력란에 사용하는 요소입니다. 이 입력란에 비밀번호를 입력하게 되면 문자나 숫자 대신에 ●, * 으로 표시돼서 입력한 문자가 보이지 않게 되는 형식입니다. 이 요소의 속성은 text 필드와 모두 같은데요. value 값만 없다는 점이 차이가 있습니다. 


앞에서 알아본 두 가지 유형의 형식을 이용해서 예제를 하나 만들어 볼게요. 

이렇게 input 태그를 이용해서 type 유형에 text와 password를 입력해서 만들어 봤는데요. text 유형은 텍스트 입력란의 길이가 10이고, 초기 출력값(value)에 "아이디 입력"이라는 값을 넣었습니다. 그리고 입력할 수 있는 최대 글자 길이는 20으로 설정한 상태입니다. 


다음으로, password 유형은 입력란의 길이를 20으로 했구요. 최대 입력 가능한 문자 역시 20으로 설정했습니다. 브라우저에서 열어서 비밀번호를 입력해봤는데요. [●●●●]형식으로 출력되는 걸 확인할 수 있습니다. 간단한 내용이니까 직접 메모장 열고 입력해보셔요. ^^ 수고하셨습니다. 


저작자표시 비영리 변경금지 (새창열림)
Posted by 차케요

    최근...

  • 포스트
  • 댓글
  • 트랙백
  • 더 보기

카테고리

NEW (900)
아이폰 개발 기초 (7)
취미 (16)
아두이노 (16)
[안드로이드] 어플만들기 (77)
안드로이드 기초 다지기 (61)
슈팅게임 만들기 (4)
[JAVA]자바 공부하기 (48)
C언어 알고리즘 (61)
[Unity3D]유니티3D 강좌 (7)
컴퓨터 (325)
포토샵CS2 강좌 (6)
유용한 프로그램 (244)
리눅스 노트정리 (22)
임베디드 리눅스 (11)
New블로그 (9)
음식의 효능 (4)
일반상식 (56)
HTML 공부 (40)
포토샵 공부 (36)
엑셀 (6)
파워포인트 공부 (19)
노트정리 (38)
일상 (33)
TV영화 (85)
방명록 : 관리자 : 글쓰기
차케요's Blog is powered by daumkakao
Skin info material T Mark3 by 뭐하라
favicon

다루두루

공부하면서 정리하는 노트같은 블로그입니다.

  • 태그
  • 링크 추가
  • 방명록

관리자 메뉴

  • 관리자 모드
  • 글쓰기
  • NEW (900)
    • 아이폰 개발 기초 (7)
    • 취미 (16)
      • 아두이노 (16)
    • [안드로이드] 어플만들기 (77)
      • 안드로이드 기초 다지기 (61)
      • 슈팅게임 만들기 (4)
    • [JAVA]자바 공부하기 (48)
    • C언어 알고리즘 (61)
    • [Unity3D]유니티3D 강좌 (7)
    • 컴퓨터 (325)
      • 포토샵CS2 강좌 (6)
      • 유용한 프로그램 (244)
    • 리눅스 노트정리 (22)
      • 임베디드 리눅스 (11)
    • New블로그 (9)
    • 음식의 효능 (4)
    • 일반상식 (56)
    • HTML 공부 (40)
    • 포토샵 공부 (36)
    • 엑셀 (6)
    • 파워포인트 공부 (19)
    • 노트정리 (38)
    • 일상 (33)
    • TV영화 (85)

카테고리

PC화면 보기 티스토리 Daum

티스토리툴바