1. 폼(form)이란?
- 로그인하거나 사용자가 웹 사이트로 정보를 보낼 수 있는 모든 요소를 뜻한다.
- 사용자가 작성한 정보는 웹 서버로 전송된다.
- 웹서버는 ID와 PassWord가 일치하는지 확인하고 이를 웹 브라우저에 보낸다.
- 정보를 검색 수정하는 과정은 모두 데이터베이스를 기반으로 작동한다.
-> 텍스트 박스나 버튼 같은 폼 형태는 HTML 태그로 만든다.
-> 폼에 입력한 사용자 정보는 ASP나 PHP, JSP같은 서버 프로그래밍을 이용해야한다.
- 폼의 기본형
-> <form [속성="속성값"]>여러가지 폼 요소</form>
- form 태그는 몇 가지 속성을 사용해서 입력받은 자료를 어떤 방식으로 서버에 넘기는지,
- 서버에서 어떤 프로그램을 이용해서 처리할 것인지 지정한다.
2. <form> 태그의 속성
1) method: 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지를 지정한다. (get/ post)
2) name: 자바스크립트로 폼을 제어할 때, 사용할 폼의 이름을 지정한다.
3) action: <form>태그 안의 내용을 처리해 줄 서버 프로그램을 지정한다.
4) target: action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 한다.
5) anto complete: 자동 완성 기능을 나타낸다. (예전에 입력한 내용을 자동으로 표시해준다.)
-> 중요한 개인 정보나 인증 번호와 같은 일회성 정보를 입력한다면 기억하지 않는 것이 좋다.
-> form태그의 autocomplete 속성을 off로 지정하면 끌 수 있다.
6) <fieldset>,<legend> 폼 요소를 그룹으로 묶는다.
-> <legend>태그는 <fieldset>태그로 묶은 그룹에 제목을 붙일 수 있다.
Ex) 폼 요소를 그룹으로 묶어 표현하기
<hide/>
<form action="">
<fieldset>
<legend>상품 선택</legend>
</fieldset>
<fieldset>
<legend>배송 정보</legend>
</fieldset>
</form>Note) 실행 결과
- 주문양식에서 <fieldset>태그와 <legend>태그를 사용해서 상품 선택과 배송 정보를 그룹으로 묶었다.
7) 폼 요소에 레이블을 붙이는 <label>태그
Def) label: 입력란 가까이에 아이디나 비밀번호처럼 붙여놓은 텍스트를 말한다.
- label은 <input>태그와 같은 폼 요소에 레이블을 붙일 때 사용한다.
- label 사용 방법
(1) 태그 안에 폼 요소를 넣는다.
<hide/>
<label>아이디(6자 이상)<input type="text"></label>
(2) <label>태그와 폼 요소를 따로 사용하고 <label>태그의 for속성과 폼 요소의 id 속성을 이용해서 서로 연결한다.
- 폼 요소의 id속성값을 <label> 태그의 for 속성에게 알려주는 방법을 사용한다.
- 폼 요소에 연결된 <label> 태그에 for= "user-id"라고 입력해서 폼 요소와 레이블을 연결한다.
- label태그를 사용한 레이블과 사용자 정보를 입력받는 input 태그가 떨어져있어도 둘 사이를 연결 가능하다.
<hide/>
<label for="user-id">아이디(6자 이상)</label>
<input type="text" id="user-id">Note) 실행 결과
3. 사용자 입력을 위한 input태그
- 웹 사이트의 회원 가입이나 로그인 화면을 폼을 사용해서 작성한다.
- 회원 가입 화면에서 마우스 오른쪽의 검사를 누르면 개발자 도구 창이 열린다.
- 소스 코드에서 <input>태그를 확인할 수 있다.
Note) <input> 태그의 type속성 알아보기
1) 텍스트와 비밀 번호를 나타내는 type = "text"와 type ="password"
2) 기본형
3) 자주 사용하는 속성
(1) size: 텍스트와 비밀번호의 길이를 지정한다.
(2) value: 텍스트 필드 요소과 화면에 표시될 때, 텍스트 필드 부분에 보여주는 내용이다.
(3) maxlength: 텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정한다.
Ex) 로그인 폼 만들기
<hide/>
<form>
<fieldset>
<label>아이디: <input type="text" id="user_id" size="10"></label>
<label>비밀번호: <input type="password" id="user_pw" size="10"></label>
<input type="submit" value="로그인">
</fieldset>
</form>- 아이디는 텍스트 타입, 비밀번호는 password타입으로 입력된 것을 볼 수 있다.
Note) 실행 결과
Note) 다양한 용도에 맞게 입력하는 type= "search", type= "url", type = "email", type = "tel"
->한 줄 짜리 일반 텍스트를 입력할 때는 텍스트 필드를 사용한다.
1) type= "search": 검색을 위한 텍스트 필드로 인식한다.
검색어를 입력하면 "X"표가 표시되어 입력한 검색으로 지울 수 있다.
2) type= "url": 웹 주소를 입력하는 필드
3) type = "email": 이메인 주소를 입력하는 필드, 지정한 형식에 맞지 않으면 오류 메시지를 보낸다.
4) type = "tel": 전화번호를 나타낸다. 이 값을 이용해서 바로 전화를 걸 수 있다.
5) type= "checkbox", type = "radio" 체크 박스와 라디오 버튼을 나타낸다.
- 여러 항목 중에서 원하는 항목을 선택할 때, 사용하는 폼 요소
- 라디오 버튼: 1개만 선택 / 체크 박스: 2개 이상 선택하는 경우
- 라디오 버튼/ 체크 박스에서 사용되는 속성
(1) value: 선택한 체크 박스나 라디오 버튼을 서버에게 알려줄 때 넘겨줄 값을 지정한다. (영문 or 숫자 필수 속성)
(2) checked: 여러 항목 중 기본 값으로 선택하고 싶은 항목에 사용한다.
- 라디오 버튼에서 하나의 버튼만 선택할 수 있게 하려면 모든 라디오 버튼의 name값을 똑같이 지정할 수 있다.
Ex) 회원 가입 신청서 만들기
- [메일 수신] / [메일 수신 안 함]이라는 라디오 버튼을 만든다.
- [가입하기] / [취소] 버튼을 추가한다.
<hide/>
<form>
<fieldset>
<legend>사용자 정보</legend>
<ul>
<li>
<label for ="uid">아이디</label>
<input type = "text" id = "uid">
</li>
<li>
<label for = "umail">이메일</label>
<input type = "email" id = "umail">
</li>
<li>
<label for = "pwd1">비밀번호</label>
<input type = "password" id="pwd1">
</li>
<li>
<label for="pw2">비밀번호 확인</label>
<input type = "password" id = "pwd2">
</li>
</ul>
</fieldset>
<fieldset>
<legend>이벤트와 새로운 소식</legend>
<input type = "radio" name = "mailing" id = "mailing_y">
<label for = "mailing_y">메일 수신</label>
<input type = "radio" name = "mailing" id = "mailng_n" checked>
<label for = "mailing_n">메일 수신 안 함</label>
</fieldset>
<div id = "buttons">
<input type = "submit" valur = "가입하기">
<input type = "reset" value = "취소">
</div>
</form>Note) 실행 결과
Ex) 숫자 입력 필드를 나타내는 type = "number" , type = "range"
- 텍스트 필드에서 사용자가 숫자를 직접 선택할 수도 있지만 type = "number"를 사용하면 숫자 선택 가능
- type = "range"는 슬라이드 막대를 움직여 숫자를 입력할 수 있다.
- 2개의 스핀 박스를 만들어서 최솟값은 0, 최댓값은 각각 5, 3으로 지정했다.
-> step속성을 지정하지 않았기 때문에 화살표를 누르면 1씩 커지거나 작아진다.
- 두번째 스핀 박스에는 value= "1"을 지정해서 초깃값 1이 화면에 표시된다.
- type = "range"를 통해 숫자를 입력하는 슬라이딩 막대를 만들 수 있다.
-
<hide/>
<ul>
<li>
<label><input type="checkbox" value="s_3">선물용 3kg</label>
<input type="number" min="0" max="5">개 (최대 5개)
</li>
<li>
<label><input type="checkbox" value="s_5">선물용 5kg</label>
<input type="number" min="0" max="3" value="1">개 (최대 3개)
</li>
</ul>
<ul>
<li>
<label><input type="checkbox" value="f_3">가정용 3kg</label>
<input type="range" min="0" max="5">개 (최대 5개)
</li>
<li>
<label><input type="checkbox" value="f_5">가정용 5kg</label>
<input type="range" min="0" max="3" value="1">개 (최대 3개)
</li>
</ul>
Note) 실행 결과
Ex) 날짜 입력을 나타내는 type ="date" , type = "month", type = "week"
- 웹 문서나 애플리케이션에 달력을 넣으려면 날짜 관련 유형을 이용한다.
- 첫번째 달력에서 날짜를 선택하면 "연도-월-일"형식으로 입력되고
Ex) 시간 입력을 나타내는 type = "time", type = "datetime", type = "datetime-local"
- 시간 지정 => type = "time"
-> 폼에서 시간을 입력하도록 한다.
- 날짜와 시간을 함께 지정 => type = "datetime", type = "datetime-local"
-> 사용자가 웹 문서를 보고 있는 지역에 맞는 날짜와 시간을 함께 입력할 수 있다.
Ex) 전송, 리셋 버튼을 나타내는 type = "submit", type = "reset"
- 전송 버튼을 나타내는 submit는 폼에 입력한 정보를 서버로 전송한다.
- reset버튼을 <input>요소에 입력된 모든 정보를 재설정해서 내용을 모두 지운다.
-> 이 때, value 속성을 사용해서 버튼에 표시할 내용을 지정한다.
Ex) 이미지 버튼을 나타내는 type = "image"
- type = "image" 는 submit 버튼과 같은 기능을 하는 이미지 버튼을 나타낸다.
Ex) 기본 버튼을 나타내는 type ="button"
- submit이나 reset 버튼과 같은 기능이 없고 오직 버튼 형태만 삽입한다.
- 버튼을 삽입하여 자바스트립트 실행하기
- 공지창열기 라는 버튼을 만들고 클릭하면 자바스크립트의 window.open() 함수를 실행한다.
- 클릭하면 새 탭에서 연결한 문서가 나타난다.
<hide/>
<form>
<input type="button" value="공지 창 열기" onclick="window.open('notice.html')">
</form>Note) 실행 결과
Ex) 파일을 첨부할 때 사용하는 type = "file"
- 폼에서 사진이나 문서를 첨부해야하는 경우에 사용한다.
- 버튼을 클릭하면 [파일 선택]이나 [찾아보기] 버튼이 표시 되는데 클릭하고 파일을 선택하면 첨부한다.
Ex) 히든 필드 만들 때 사용하는 type= "hidden"
- 히든 필드는 화면에 보이지는 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소이다.
- 사용자에게 알려줄 필요는 없지만 관리자가 알아야하는 정보는히든 필드로 입력한다.
4. input 태그의 주요 속성
1) 자동으로 입력 커서를 갖다 놓는 autofocus 속성
- 페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시할 수 있다.
- 사이트를 열자마자 특정 텍스트 필드에 마우스 커서가 깜빡 거린다.
2) 힌트를 표시해주는 placeholder 속성
- 사용자가 텍스트를 입력할 때 입력란에 적당한 힌트 내용을 표시해서 필드를 클릭하면 내용이 사라진다.
ex) 아이디를 입력하세요.
3) 읽기 전용 필드를 만들어주는 readonly 속성
- 입력은 하지 못하고 읽게만 하는 읽기 전용 필드를 만들 수 이따.
4) 필수 입력 필드를 지정하는 required 속성
- 내용을 폼에 입력하면 서버에 폼을 전송해야하는데 이때 필수 필드에 필요한 내용이 모두 채워졌는지 검사한다.
Ex)
<hide/>
<form>
<fieldset>
<legend>배송 정보</legend>
<ul id="shipping">
<li>
<label for="prod">주문 상품</label>
<input type="text" id="prod" value="상품용 3KG" readonly>
</li>
<li>
<label for="user-name">이름 </label>
<input type="text" id="user-name" autofocus required>
</li>
<li>
<label for="addr">배송 주소</label>
<input type="text" id="addr" required>
</li>
<li>
<label for="mail">이메일</label>
<input type="email" id="mail">
</li>
<li>
<label for="phone">연락처</label>
<input type="tel" id="phone" placeholder="하이픈 빼고 입력해 주세요.(01012345678)" required>
</li>
<li>
<label for="d-day">배송 지정</label>
<input type="date" id="d-day"> <small>(주문일로부터 최소 3일 이후)</small>
</li>
</ul>
</fieldset>
<div>
<input type="submit" value="주문하기">
<input type="reset" value="취소하기">
</div>
</form>
Note) 실행 결과
- 초기 화면 (이름 텍스트 필드에 커서가 깜빡 거린다.)
- 주문하기 버튼을 누른 후
Ex) 회원 가입 신청서에 속성 지정하기
- autofocus, placeholder 속성을 넣는다.
- checked 속성을 넣는다.
<hide/>
<ul>
<li>
<label for="uid">아이디</label>
<input type="text" id="uid" autofocus placeholder="4자 ~ 10자 사이, 공백없이" required>
</li>
<li>
<label for="umail">이메일</label>
<input type="email" id="umail" required >
</li>
<li>
<label for="pwd1">비밀번호</label>
<input type="password" id="pwd1" placeholder = "문자와 숫자, 특수 기호 포함" required>
</li>
<li>
<label for="pw2">비밀번호 확인</label>
<input type="password" id="pwd2" required>
</li>
</ul><hide/>
<fieldset>
<legend>이벤트와 새로운 소식</legend>
<input type="radio" name="mailing" id="mailing_y" value="mailing_yes">
<label for="mailing_y">메일 수신</label>
<input type="radio" name="mailing" id="mailing_n" value="mailing_no" checked>
<label for="mailing_n">메일 수신 안 함</label>
</fieldset>Note) 실행 결과
5. 폼에서 사용하는 여러가지 태그
1) 여러 줄을 입력하는 텍스트 영역 <textarea>태그
- 폼에서 텍스트를 여러 줄 입력하는 영역을 만들 수 있다.
- 회원가입 양식에서 사용자 약관을 표시할 때 사용한다.
2) 드롭다운 목록을 만들어주는 <select>, <option>태그
- 사용자가 내용을 직접 입력하지 않고 여러 옵션 중에서 선택하게 하려면 드롭 다운이나 데이터 목록을 사용한다.
- 드롭 다운 목록은 목록을 클릭했을 때, 옵션이 아래쪽으로 펼쳐져서 붙은 이름이다.
- <select>태그의 속성
-> 옵션이 하나만 표시되는데 화살표 버튼을 클릭하면 나머지 옵션 중 필요한 항목을 선택 가능하다.
-> size나 multiple을 통해 항목의 개수를 조절할 수 있다.
- <option> 태그의 속성
-> 드롭다운 목록에 표시되는 옵션은 <option>태그를 이용해 지정한다.
-> value (해당 항목을 선택할 때, 서버로 넘겨줄 값을 지정한다.)
-> selected (드롭다운 메뉴를 삽입할 때, 기본적으로 선택해서 보여 줄 항목을 지정한다.)
3) 데이터 목록을 만드는 <datalist>, <option> 태그
- 데이터 목록을 사용하면 텍스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값중 선택 가능하다.
- <datalist>태그를 이용해서 데이터 목록의 시작과 끝을 표시하고 그 사이에 <option> 태그를 사용해 각 데이터의 옵션을 표시한다.
- 이 때, value 속성을 사용해서 서버로 넘겨줄 값을 지정하는데, 이 값이 텍스트 필드에도 나타난다.
Ex) 데이터 목록 만들기
- 포장 여부를 데이터 목록으로 만들고 텍스트 필드에서 그 값을 선택해서 사용한다.
<hide/>
<label for="prod2">포장 여부 </label>
<input type="text" id="prod2" list="pack">
<datalist id="pack">
<option value="package">선물 포장</option>
<option value="no_package">포장 안 함</option>
</datalist>Note) 실행 결과
4) 버튼을 만들어 주는 <button>태그
- 버튼 태그를 이용해서 폼을 전송하거나 리셋하는 버튼을 삽입할 수 있다.
- 그리고 주문하기 버튼에서느
- <button>태그의 type 속성
-> submit: 폼을 서버로 전송한다.
-> reset: 폼에 입력한 내용을 초기화한다
-> button: 버튼 형태를 만든다.
Ex)드롭다운 목록과 텍스트 영역 추가하기
- placeholder속성을 사용해서 힌트를 남겨준다.
<hide/>
<li>
<label for = "path">가입 경로</label>
<select id = "path">
<option value = "blog">블로그</option>
<option value = "search">검색</option>
<option value = "sns">SNS</option>
<option value = "etc">기타</option>
</select>
</li><hide/>
<li>
<label for = "memo">메모</label>
<textarea cols = "40" rows = "4" placeholder="남길 말씀이 있다면 여기에"></textarea>
</li>
Note) 실행 결과
Ex) 마무리 문제 1)
<hide/>
<form>
<ul>
<li>
<label for = "r-name">이름</label>
<input type = "text" id = r-name">
</li>
<li>
<label for = "r-phone">전 화</label>
<input type = "tel" id = r-phone">
</li>
<li>
<label for = "r-email">이메일</label>
<input type = "email" id = r-email">
</li>
<li>
<input type = "submit" value = "예약하기">
</li>
</ul>
</form>Note) 실행 결과
Ex) 마무리 문제 2)
<hide/>
<form>
<h4>개인 정보</h4>
<ul>
<li>
<label for = "sname">이름</label>
<input type="text" placeholder="공백 없이 입력하세요" >
</li>
<li>
<label for = "sphone">연락처</label>
<input type = "tel">
</li>
</ul>
<h4>지원 분야</h4>
<ul>
<input type = "radio" >
<label for = "publishing">웹 퍼블시링</label>
<br>
<input type = "radio" >
<label for = "app">웹 애플리케이션 개발</label>
<br>
<input type = "radio" >
<label for = "eg">개발 환경 개선</label>
</ul>
<label>
<h4>지원동기</h4>
<textarea id="motive" cols="60" rows="5" placeholder="본사 지원 동기를 간략히 써 주세요."></textarea>
</label>
<input type = "submit" value = "접수하기">
<input type = "reset" value = "다시 쓰기">
</form>Note) 실행 결과
'FrontEnd' 카테고리의 다른 글
| Chapter 07. 텍스트를 표현하는 다양한 스타일 (0) | 2022.04.20 |
|---|---|
| Chapter 06. CSS의 기본 (0) | 2022.04.20 |
| Chapter 04. 웹 문서에 다양한 내용 입력하기 (0) | 2022.04.18 |
| Chapter 03. HTML기본 문서 만들기 (0) | 2022.04.18 |
| Chapter 02. 웹 개발 환경 만들기 (0) | 2022.04.17 |