비전공자를 위한 HTML/CSS-폼 요소1

폼 요소는 서버에 데이터를 전달하기 위한 요소이며 <input>은 대표적인 폼 요소입니다.

<input>은 내용이 없는 빈 요소이며 type 속성을 통해 여러 종류의 입력 양식으로 나타나게 됩니다.

본 강의에서는 자주 사용되는 type들만 다루니 나머지는 아래 링크를 참고하시기 바랍니다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

 

type="text"

<input type="text" placeholder="ㅇㅇㅇ">

주로 아이디, 이름, 주소, 전화번호 등 단순한 텍스트를 입력할 때 사용합니다.

type="text"에는 placeholder 속성이 존재합니다.

placeholder 속성은 사용자가 입력하기 전 미리 화면에 노출하는 값으로, 입력하는 값의 양식을 표현할 수 있습니다. 

 

type="password"

<input type="password">

암호와 같이 공개할 수 없는 내용을 입력할 때 사용합니다.

화면에는 type="text"와 같게 나타나지만 실제로 입력할 때 값을 노출하지 않습니다.

 

type="radio"

<input type="radio" name="gender"> 남자
<input type="radio" name="gender"> 여자

라디오 버튼을 만들 때 사용합니다.

라디오 버튼은 중복 선택이 불가능하며 하나의 항목만을 선택해야 합니다.

 

type="checkbox"

<input type="checkbox" name="hobby"> 등산
<input type="checkbox" name="hobby"> 독서
<input type="checkbox" name="hobby"> 운동

체크박스를 만들 때 사용합니다.

체크박스는 중복 선택이 가능합니다.

 

본 강의에서는 다루지 않았지만, 라디오 버튼과 체크박스에는 checked, name 속성이 존재합니다.

checked 속성은 값이 별도로 존재하지 않는 boolean 속성입니다.

boolean 속성은 true/false 둘 중 하나의 값을 가지며 속성이 존재하면 true,

속성이 존재하지 않으면 false를 가집니다.

name 속성은 라디오 버튼과 체크박스를 그룹화시켜주는 속성입니다.

아직 name 속성을 다루기 전이므로 실제 버튼을 클릭했을 경우 동작하는 방식에 대해서만 알아두시기 바랍니다.

 

---

 

참고링크

 

 

 

HTML elements reference

https://developer.mozilla.org

This page lists all the HTML elements, which are created using tags.