7. input 태그

 

input은 내용이 없는 빈 요소이며, type 속성을 통해 여러 종류의 입력 양식으로 나타낼 수 있다.

 

input 태그 형식

• type: 입력 태그의 유형을 설정하는 속성
• value: 유저가 입력 필드에 입력한 정보
• name: 서버로 전달되는 이름을 설정하는 속성
• id: 다른 요소와 식별 가능하게 하는 고유한 이름

주요 속성

• autofocus: 페이지를 불러오자마자 폼에서 원하는 요소에 자동으로 마우스 포인터를 표시
• placeholder: 사용자가 텍스트를 입력할 때 입력란에 적당한 힌트 내용을 표시
• title: 마우스 커서를 갖다 대면 해당 요소가 의미하는 바를 알려주는 역할을 하는 속성
• autocomplete: 예전에 입력한 내용을 자동으로 표시해 주는 자동 완성 기능
• readonly: 읽기 전용 필드. 입력x 수정x 값 전송o
• disabled: 수정x 값 전송x
• required: 필수 입력 필드 지정

input type	속성
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자
password	암호와 같이 공개할 수 없는 내용을 입력할 수 있는 필드
email	이메일 주소를 입력할 수 있는 필드
tel	전화번호를 입력할 수 있는 필드
checkbox	주어진 여러 항목에서 여러 개를 중복해서 선택할 수 있는 체크 박스
radio	주어진 여러 항목에서 1개만 선택할 수 있는 라디오 박스. 동일한 name으로 설정.
button	일반 버튼
hidden	사용자에게 입력받지 않고, value에 설정된 값을 서버로 전송
submit	서버로 form의 데이터를 보내는 기능
reset	form 태그 안에서 입력된 input 태그들의 값을 초기화 시켜주는 버튼
file	파일을 첨부할 수 있는 버튼

 

 

checkbox & radio

<h4>당신이 배우고 싶은 언어는?(다중 선택 가능)</h4>
    <div>
      <input type="checkbox" name="chk_lang" id="chk_html" />
      <label for="chk_html">HTML</label>
      <input type="checkbox" name="chk_lang" id="chk_css" />
      <label for="chk_css">CSS</label>
      <input type="checkbox" name="chk_lang" id="chk_js" />
      <label for="chk_js">JavaScript</label>
    </div>

    <h4>당신이 배우고 싶은 언어는?(하나만 선택 가능)</h4>
    <div>
      <input type="radio" name="rdo_lang" id="rdo_html" />
      <label for="rdo_html">HTML</label>
      <input type="radio" name="rdo_lang" id="rdo_css" />
      <label for="rdo_css">CSS</label>
      <input type="radio" name="rdo_lang" id="rdo_js" />
      <label for="rdo_js">JavaScript</label>
    </div>

 

- 실행 결과

당신이 배우고 싶은 언어는?(다중 선택 가능)

HTML CSS JavaScript

당신이 배우고 싶은 언어는?(하나만 선택 가능)

HTML CSS JavaScript

 

input type 활용

<div>
      <label for="age">당신의 나이는?</label>
      <input type="number" min="0" max="100" name="" id="age" />
    </div>
    <br />
    <div>
      <label for="userPass">비밀번호</label>
      <input type="password" name="" id="userPass" />
    </div>
    <br />
    <div>
      <form action="">
        <label for="phone">전화번호</label>
        <input
          type="tel"
          name=""
          id="phone"
          value=""
          pattern="^010-\d{4}-\d{4}$"
        />
        <button type="submit">저장</button>
      </form>

 

- 실행 결과

당신의 나이는?

비밀번호

전화번호

 

주요 속성 활용

<form action="">
        <label for="userID">아이디</label>
        <input type="text" name="" id="userID" required autocomplete="on" autofocus="on"/>
        
        <label for="userPass">비밀번호</label>
        <input type="password" name="" id="userPass" required placeholder="4자~10자 사이"/>
        
        <button type="submit">저장</button>
      </form>

 

- 실행 결과

아이디 비밀번호