HTML - <input>태그

<input>태그란

 

 

<input>태그란 사용자로부터 입력을 받을 수 있는 입력필드(input field)를 정의할 때 사용한다.

 

<input>요소는 사용자가 데이터를 입력할 수 잇는 입력 필드를 선언하기 위해 <form>요소 내부에서 사용되는데, type 속성값을 달리하면서 여러 가지 모양으로 나타낼 수 있다.

 

<label>요소를 사용하면 <input>요소의 라벨을 정의할 수 도 있다.

 

 

 

 

 

<input>요소의 타입

 

 

<input>요소의 타입에는 여러가지 종류가 있는데 그 중에 몇가지만 소개해보려 한다.

• <input type = "text">
• <input type = "number">
• <input type = "password">
• <input type = "submit">
• <input type = "radio">
• <input type = "checkbox">
• <input type = "button">

 

 

---

Input type = text

 

 

 

 

<input type = "text">는 텍스트 입력이 가능한 한 줄의 입력 필드를 생성한다.

- 예시

<form>
	<label>Text : </label>
	<input type="text" placeholder="텍스트를 입력하세요" />
</form>

 

 

 

- 결과

 

Text :

 

 

 

 

---

Input type = number

 

 

 

 

<input type="number">는 숫자 값을 입력해야 하는 입력필드에 사용이 되며, 숫자의 범위도 설정할 수 있도록 한다.

- 예시

<form>
	<label>number : </label>
	<input name="num1" type="number" min="0" max="100" placeholder="0~100"/>
</form>​

 

 

 

- 결과

 

number :

 

 

 

 

 

---

Input Type = password

 

 

 

 

<input type="password">는 password 필드를 생성한다. password 필드에 문자를 입력하면 동그라미 표시로 입력된 문자가 가려진다.

- 예시

<form>
<label>password : </label>
<input type="password" placeholder="비밀번호 입력하세요" />
</form>​

 

 

 

- 결과

 

password :

 

 

 

 

 

---

Input Type = submit

 

 

 

 

<input type = "submit">는 폼을 제출하는 버튼을 생성한다. 버튼을 누를 때 서버 페이지는 입력된 값을 저장해서 들고 있게 된다.

- 예시

<form>
		<label>텍스트 : </label><br>
		<input type="text" placeholder="텍스트를 입력하세요" /><br>
		<label> 패스워드 : </label><br>
		<input type="password" placeholder="비밀번호 입력하세요" /><br><br>
		<input type="submit" />
</form>​

 

 

 

- 결과

 

텍스트 :

패스워드 :

 

 

 

 

 

---

Input Type = radio

 

 

 

 

<input type="radio">는 라디오 버튼을 생성한다. 라디오 버튼은 이름을 설정하지 않으면 같은 부류로 인식하지 못하기 때문에 name=""을 이용하여 같은 부류의 선택지는 같은 이름을 부여해 줘야 한다.

- 예시

<form>
	<input type="radio" id="yes" name="select" value="yes">
    <label for="yes">yes</label><br>
    <input type="radio" id="no" name="select" value="no">
    <label for="no">no</label><br>
</form>​

 

 

 

- 결과

 

yes
no

 

 

 

 

---

Input Type = checkbox

 

 

 

 

<input type="checkbox">는 체크박스를 생성한다. 체크박스는 다중으로 선택이 가능하다.

- 예시

<form>
  <input type="checkbox" name="hobby" value="영화보기"> 영화보기<br>
  <input type="checkbox" name="hobby" value="여행가기"> 여행가기
</form>​

 

 

 

- 결과

 

영화보기
여행가기

 

 

 

 

---

Input Type = button

 

 

 

 

<input type="button"> 버튼을 생성한다.

- 예시

<input type="button" onclick="alert('안녕!(ღ’ᴗ‘ღ)')" value="Click Me!">​

 

 

 

- 결과

 

 

 

 

 

---

<label> 태그

 

 

 

 

<label> 태그는 사용자 인터페이스(UI) 요소의 라벨(label)을 생성할 때 사용한다. 이는 <input>태그에서 유용하게 쓰이는데 <label>태그를 쓰지않고 인풋필드를 설명하는 값을 텍스트로 넣을 순 있지만 그 텍스트와 인풋필드가 연결되어 있지는 않다. 그래서 <label>태그를 이용하여 그 텍스트와 인풋필드를 연결시켜 줄 수 있다.

 

사용하는 방법으로는 두가지가 있다.

- 예시

<div>
	<label for="my-text">텍스트 </label>
	<input id="my-text" type="text" placeholder="텍스트를 입력하세요" />
</div>​

레이블 설정하는 방법 중 하나는 input태그에 id를 속성값을 지정하고 label for의 속성값에 결합하고자 하는 요소의 id속성값을 주면 된다.

 

- 예시2

<div>
<label>텍스트 <input type="text" placeholder="텍스트를 입력하세요" /></label>
</div>​

다른 방법은 label태그로 input태그를 감 싸면 된다.  아이디를 지정해주고 지정해준값을 label넣어주고 하는 과정을 안해도 되서 위의 방법보다는 좀 더 편한 방법이다.

 

 

 

 

 

 

 

- 결과

 

텍스트

​

 

결과에서 보는것처럼 label을 선택해도 텍스트필드에 커서가 깜빡거리면서 입력이 가능해지도록 한다. 이로 써 label의 값과 텍스트필드의 값이 이어진 것을 알 수 있다.