사용자 입력 input - text, sumit, reset, image, password, search, url, email, tel, checkbox, radio, number, range, data, month, week, time, datatime, datetime-local

input - text, sumit, reset, image, password, search, url, email, tel, checkbox, radio, number, range, data, month, week, time, datatime, datetime-local

 

<input>

로그인 id, password등의 사용자 입력을 받는 태그

 

속성들: type, id, size, value, maxlength

 

type속성의 값들: text, sumit, reset, image, password, search, url, email, tel, checkbox, radio, number, range, data, month, week, time, datatime, datetime-local

 

속성들

type: 아래 참고

id: 

size: 텍스트나 비밀번호 필드의 보여질 길이를 지정한다. 최대 글자수는 10개인데 size속성값이 5이면 5글자 크기에 맞춰 보여준다.

value: 텍스트 필드 부분에 기본은 비었지만, 보여줄 내용을 지정할 수 있다.

maxlength: 입력할 수 있는 최대 문자 수.

checked: 체크 박스나 라디오 버튼 항목등에서 기본은 아무것도 선택되지 않았지만 기본 선택을 지정할 수 있다.

 

예제1

Javascript input text 값 얻기

 

예제2

html 예제

  <form>
    <fieldset>
      <legend>사용자 정보</legend>    
      <ul>
        <li>
          <label for="uid">아이디</label>
          <input type="text" id="uid" autofocus placeholder="4~10자 사이, 공백없이" required> 
        </li>
        <li>
          <label for="umail">이메일</label>
          <input type="email" id="umail" required> 
        </li>
        <li>
          <label for="pwd1">비밀번호</label>
          <input type="password" id="pwd1" placeholder="문자와 숫자, 특수 기호 포함" required>
        </li>        
        <li>
          <label for="pwd2">비밀번호 확인</label>
          <input type="password" id="pwd2" required> 
        </li>
      </ul>      
    </fieldset>
    <fieldset>
      <legend>이벤트 수신</legend>
      <input type="radio" name="mailing" id="mailing_y" value="mailing_yes">
      <label for="mailing_y">메일 수신 허용</label>
      <input type="radio" name="mailing" id="mailing_n" value="mailing_no" checked>
      <label for="mailing_n">메일 수신 거부</label>     
    </fieldset>
    <div id="buttons">
      <input type="submit" value="가입하기">
      <input type="reset" value="취소">
    </div>
  </form>

 

html 결과

사용자 정보

• 아이디
• 이메일
• 비밀번호
• 비밀번호 확인

이벤트 수신

메일 수신 허용 메일 수신 거부

 

 

text

 

sumit

 

reset

 

image

 

password

 

search

 

url

 

email

 

tel

 

checkbox

 

radio

 

number

 

range

 

data

 

month

 

week

 

time

 

datatime

 

datetime-local