입력 양식 작성하기 2 - 사용자 입력을 위한 input 태그 1 : 기본 type과 회원 가입 폼 만들기

앞장에서는 개념적인 기초 학습을 진행했다면 이번 장에서는 input 태그의 다양한 기능에 대해서 학습하게 된다. 아이디나 검색어를 입력하는 검색 상자나 로그인 버튼처럼 사용자가 입력할 부분은 주로 <input> 태그를 아용해서 넣는다.

 

---

 

 

 

1. 웹 폼의 다양한 곳에서 사용하는 <input> 태그

input 태그가 어떻게 사용되는지 확인할 수 있다.

 

 

 

 

 

<input> 태그의 type 속성 한눈에 살펴보기

---

 

 

 

2. 텍스트와 비밀번호를 나타내는 type="text"와 type="passward"

비밀번호 필드는 입력하는 내용을 화면에 보여주지 않아야 하므로 *나 ●로 표시한다.

<input type = "text">
<input type = "password">

 

 

 

간단한 로그인 폼 만들기

 

 

아이디와 비밀번호를 입력할 수 있다. monte라는 아이디를 한번 사용하면 한두 글자만 입력해도 자동 완성이 되는 것을 볼 수 있다. 이 학습에서는 예제를 확인하고 복사하여 붙여넣기만 하고 있지만, 다음 포스트에서 내가 직접 만든 문제들로 예제 문제를 풀어보며 연습해보려고 한다.

 

 

 

체크 박스와 라디오 버튼을 삽입하는 폼 만들기

 

 

이렇게 type 속성별로 지정할 수 있는 유형이 다르게 선택된다. 직접 실습을 하며 폼을 만들어보기로 하자.

---

 

 

 

DO IT 실습 : 회원 가입 신청서 만들기

1단계 - <form> 태그 입력하고 <fieldset>에 내용 채워 넣기

 

 

 

 

2단계 - 첫번째 필드 세트에 텍스트 추가하기

 

 

 

 

 

3단계 - 두번째 필드 세트에 라디오 버튼 추가하기

 

 

 

4단계 - 버튼 삽입하기

 

드디어 회원가입 폼이 만들어졌다.

---

 

 

학습을 마치고

오늘 새벽에 잠시 공부를 하다가 어제 남은 라면과 과자를 먹으며 영화 한 편을 보느라 공부를 다 하지는 못했다. 난 지난 20년 6개월 동안 인스턴트 음식과 TV 드라마·방송 등에 중독되어 살아왔지만 어제로서 이것들을 끊었다. 오늘은 몸무게가 많이 늘었겠지만 다시 회복하며 난 공부에만 전념하려고 한다.