input 태그

웹 문서에서 사용자가 입력할 수 있는 양식을 제공하는 태그

text와 관련된 태그

text 관련 태그에서 사용 가능한 속성

• size : 입력 상자의 크기
• maxlength : 입력 가능한 text의 최대 길이 설정
• placeholder : 입력 상자에 작성되어야 할 내용을 설명
• value : 입력 상자에 기본적으로 작성되어 있는 값(내용) 설정

input type="text"

- 한 줄 짜리 문자열(텍스트)를 입력할 수 있는 입력 상자
        - input 태그의 기본값으로 type 속성 미작성 시 자동으로 지정됨.

* 모든 input태그는 inline 형식이다!

input type="text"텍스트

input type="password"


- 비밀번호 입력상자
        - 입력되는 텍스를 가려줌

<input type="password" size="30" maxlength="10" placeholder="비밀번호">

input type="password"

url, email, tel은 일반적으로 사용하게되면 type="text"와 다를게 없다.

하지만, form태그 내부에 작성하게되면 입력된 값이 url,email,tel에 맞는 값인지 간단히 유효성 검사를 진행해준다.

type="url" : 주소(url) 입력 상자

type="email" : 이메일 입력 상자

type="tel" : 전화번호 입력 상자

type="url" : 주소(url) 입력 상자

type="email" : 이메일 입력 상자

type="tel" : 전화번호 입력 상자

숫자 관련 태그

숫자 관련 태그에서 사용 가능한 속성

• min : 최소값
• max : 최대값
• step : 증가/감소량 지정
• placeholder : 입력될 값에 대한 설명(number만 가능)
• value : 기본값 지정

input type="number"

- 숫자와 숫자 관련된 표기만 작성 가능한 입력 상자
- 브라우저에 따라 스핀박스(위,아래 화살표)가 표시되기도 함

점수 입력 :
    <input
      type="number"
      min="0"
      max="100"
      step="5"
      placeholder="5점 단위로 입력"
    />

input type="range"

• 슬라이드 바를 이용해서 숫자를 지정 - 현재 지정된 숫자를 바로 확인하는게
  불가능 -> 제출되는 페이지/Java 클래스 또는 Javascript를 이용해 확인
  

날짜/시간 관련 type

<input type="date" />
<input type="month" />
<input type="week" />
<input type="time" />    
<input type="datetime" />
<input type="datetime-local" />

type="radio" / type="checkbox" + label 태그

• radio, checkbox 는
  단독 사용 보단, 여러 관련된 값을 묶어서 처리하는 용도의 input type

• radio : 여러 선택지 중 하나만 선택

• checkbox : 여러 선택지 중 필요한 모두를 선택

속성

• value : 해당 요소를 선택했을 때 제출되는 값

• id : 문서 내에서 해당 요소를 구분하기 위한 식별값
  (중복 있으면 안됨, label 태그와 같이 사용할 예정)

• name : 관련된 것들의 묶음 이름 + 제출되었을 때 key 값

• checked : 해당 속성이 작성된 요소를 선택함 (기본값 설정)

input type="radio" 예시코드

A팀 :
B팀 :
C팀 :
제출
A팀 누르기

코드

  <label for="aTeam">A팀</label> :
  <input type="radio" name="team" value="a" id="aTeam" /> <br />
  <label for="bTeam">B팀</label> :
  <input type="radio" name="team" value="b" id="bTeam" checked /> <br />
  <label for="cTeam">C팀</label> :
  <input type="radio" name="team" value="c" id="cTeam" /> <br />
  <button>제출</button>

input type="checkbox" 예시코드

Java

DB

HTML

<label for="java">Java</label>
    <input
      type="checkbox"
      name="skill"
      id="java"
      value="자바"
      checked
    /><br />

<label for="db">DB</label>
<input type="checkbox" 
       name="skill" 
       id="db" 
       value="디비" 
       checked /><br />

<label for="html">HTML</label>
<input type="checkbox" 
       name="skill" 
       id="html" 
       value="HTML5" /><br />

    <button>제출</button>

이름이 input이 아닌 변형된 input 태그

button 태그

• 버튼을 만드는 용도`의 태그
• 단독으로 사용되기 보단, form와 함께 사용하는 경우가 많음

type 속성 값

• submit : 제출 버튼(기본값)
• reset : form태그 내부 모든 input 태그의 값을 초기화
• button : 기능이 지정되지 않은 버튼(모양만 버튼)
  -> JavaScript를 이용해서 기능을 추가해줄 수 있다.
  

이름 :

나이 :

이메일 :

submit
reset
button

이름 : <input type="text" name="name" /> <br />
나이 : <input type="number" name="age" /> <br />
이메일 : <input type="email" name="email" /> <br />

<button type="submit">submit</button>
<button type="reset">reset</button>
<button type="button" onclick="alert('버튼 클릭됨')">button</button>

textarea 태그

• input type="text"의 한계(1줄만 작성함)를 해결한 태그

• 여러 줄 작성 가능

속성

• rows : 행의 개수(몇 줄)
• cols : 열의 개수(한 줄에 들어갈 글자 개수)

  <textarea cols="80" rows="3"></textarea>