[HTML] Form 정리 (2)

.input 태그

• input 태그란 사용자로부터 정보를 입력 받을 수 있게 해주는 태그
  • type : 입력태그의 유형을 설정하는 속성
  • hidden : 사용자에게 안보임
  • tel : 전화번호 입력
  • password : 비밀번호 입력
  • month : 사용자 지역 연/월 삽입
  • number : 숫자 조절 화살표
  • checkbox : 체크박스 삽입
  • submit : 서버 전송 버튼
  • text : 텍스트 입력
  • url : URL 주소 입력
  • datatime : 국제 표준시 삽입
  • week : 사용자 지역 연/주 삽입
  • range : 숫자 조절 슬라이드 막대
  • radio : 라디오 버튼 삽입
  • reset : 리셋 버튼 삽입
  • search : 검색 상자
  • email : 이메일 입력
  • data : 사용자 지역 연/월/일 삽입
  • time : 사용자 지역 시/분/초 삽입
  • color : 색상표 삽입
  • file : 파일 첨부 버튼
  • button : 버튼 삽입

..input태그의 속성

• type="hidden"
  • 화면상에는 표시되지 않지만 서버에 입력 form을 전송 시 함께 전송되는 요소이다.
• type="text"
  • 텍스트를 입력하는 유형.
  • value에 기본 표시 될 내용을 size에 텍스트 필드 크기를 maxlength에 최대 문자 개수를 지정
    <input type="text" name="텍스트" value="기본내용" size="10" maxlength="5">
• type="button"
  • button 유형의 <input> 요소는 단순한 푸시 버튼으로 렌더링 된다.
  • 이벤트 처리기(주로 click 이벤트)를 부착하면, 사용자 지정 기능을 웹 페이지 어느곳에나 제공 가능하다.
  • Tip으로는 <input> 요소의 button 유형도 전혀 틀리지 않은 방법이지만, 이후에 생긴 <button> 요소를 사용하는 것이 선호되는 방식이다.
  • <button> 의 레이블 텍스트는 여는 태그와 닫는 태그 사이에 넣기 때문에, 더불어 이미지까지 포함이 가능하다.
    
    <input type="button" value="클릭">
• type="search"
  • 검색 상자를 만드는 텍스트 필드이다.
  • search 타입이 일반 text 타입과 다른 점은 임력 필드에 검색어를 입력하면, 입력 필드 우측에 입력된 검색어를 바로 삭제 할 수 있는 엑스(x) 표시가 생성된다.
• type="tel"
  • 사용자가 전화 번호를 입력하고 편집하는데 사용된다.
  • 모바일, 브라우저, 특히 휴대 전화에서 전화번호 입력에 최적화된 사용자 정의 키패드를 제시 할 수 있다.
  • pattern이라는 속성을 같이 쓰는 경우가 많다.
  • pattern은 정규식을 넣어서 데이터를 검증할 수 있는 속성이다.
  • pattern 속성에 정규식을 넣어서 input에 입력한 값의 유효성을 체크 할수 있다.
  • 아래 예제는 전화번호에 대한 유효성 검사이며, pattern 에 정규식으로 전화번호인지 아닌지 판단하는 식을 넣었다.
   <form action='action.jsp'>
     <div>
        <input type="text" pattern="(010)-\d{3,4}-\d{4}" title="형식 010-0000-0000">
     </div>
     <div><input type="submit" value="전송"></div>
   </form>