목차
05-1 폼 삽입하기
05-2 사용자 입력을 위한 input 태그
05-3 input 태그의 주요 속성
05-4 폼에서 사용하는 여러 가지 태그
05-1 폼 삽입하기
웹에서 만나는 폼
- 하나의 웹 페이지 안에서도 여러 가지 폼을 사용
폼을 만드는 \ 태그
- 폼을 만드는 가장 기본적인 태그
<form [속성="속성값"]>여러 폼 요소</form>
# 입력한 폼을 서버로 보내기
<form action="register.php">
/* 여러 폼 요소 */
</form>자동 완성 기능을 나타내는 autocomplete 속성
- 자동 완성 기능: 폼에서 내용을 입력할 때 예전에 입력한 내용을 자동으로 표시해 주는 것
폼 요소를 그룹으로 묶는 \, \ 태그
- \: 하나의 폼 안에서 여러 구역을 나누어 표시할 때 사용
- \: \ 태그로 묶은 그룹에 제목을 붙일 때 사용
<fieldset>
<legend>그룹 이름</legend>
</fieldset> # 폼 요소를 그룹으로 묶어서 표현하기
<form>
<fieldset>
<legend>상품 선택 </legend>
</fieldset>
<fieldset>
<legend>배송 정보</legend>
</fieldset>
</form> 
폼 요소에 레아블을 붙이는 <label> 태그
<input>태그와 같은 폼 요소에 레이블을 붙일 때 사용함
- 태그 안에 폼 요소를 넣는 것
<label>레이블명<input></label><label>태그와 폼 요소를 따로 사용하고<label>태그의 for 속성과 폼 요소의 id 속성을 이용해 서로 연결하는 것
<label for="id명">레이블명</label>
<input id="id 명"><label>태그를 사용한 레이블과 사용자 정보를 입력받는<input>태그가 떨어져 있더라도 둘 사이를 쉽게 연결할 수 있음
05-2 사용자 입력을 위한 input 태그
다양한 곳에서 사용하는 웹 폼의 <input> 태그
<input> 태그란?
- 사용자에게 입력 필드를 제공하는 태그
- form 태그와 함께 사용되며, 로그인, 회원가입, 검색창 등에서 매우 많이 쓰임
<input> 태그의 type 속성 한눈에 살펴보기
텍스트와 비밀번호를 나타내는 type="text"와 type="password"
- 텍스트 필드는 폼에서 가장 많이 사용하는 요소
<input type="text">
<input type="password">
# 로그인 폼 만들기
<form>
<fieldset>
<label> 아이디 : <input type="text" id="user_id" size="10"></label>
<label> 비밀번호: <input type="password" id ser_pw" size="10"></label>
<input type="submit" value 로그인" >
</fieldset>
</form> 
다양한 용도에 맞게 입력하는 type=”search”, type=”url”, type=”email”, type="tel"
- type="search": 웹 브라우저에서는 검색을 위한 텍스트 필드로 인식
- type="url": 웹 주소를 입력하는 필드
- type=" email" 은 이메일 주소를 입력하는 필드
- type="tel"은 전화번호를 나타내는 필드
체크 박스와 라디오 버튼을 나타내는 type="checkbox", type="radio"
- 여러 항목 중에서 원하는 항목을 선택할 때 사용하는 폼 요소
- 라디오 버튼: 항목을 1개만 선택할 때 사용
- 체크 박스: 항목을 2개 이상 선택할 때 사용
<input type="checkbox">
<input type="radio">
숫자 입력 필드를 나타내는 type="number", type="range"
- number: 스핀 박스를 이용해 숫자를 입력함
- range: 슬라이드 막대를 사용해 범위를 입력함
<input type="number">
<input type="range">
날짜 입력을 나타내는 type=”date”, type=”month”, type=”week”
시간 입력을 나타내는 type="time", type="datetime-local"
전송, 리셋 버튼을 나타내는 type="submit", type="reset"
- submit은 폼에 입력한 정보를 서버로 전송
<input type="submit|reset" value="버튼에 표시할 내용">
이미지 버튼을 나타내는 type="image"
<input type="image" src="이미지 경로" alt="대체 텍스트”>
기본 버튼을 나타내는 type="button"
<input type="button" value="버튼에 표시할 내용”>
파일을 첨부할 때 사용하는 type="file"
- type="file" 속성을 사용하면 웹 브라우저 화면에 [파일 선택]이나 [찾아보기] 버튼 등이 표시
<input type="file">
히든 필드 만들 때 사용하는 type="hidden"
- 화면의 폼에는 보이지 않지만 사용자가 입력한 정보를 서버로 보낼 때 함께 전송되는 요소
<input type="hidden" name="이름" value="서버로 전송할 값">
05-3 input 태그의 주요 속성
입력 커서를 자동으로 갖다 놓는 autofocus 속성
- 페이지를 불러오자마자 폼에서 원하는 요소에 입력 커서를 놓을 수 있음
힌트를 표시해 주는 placeholder 속성
- 입력란에 힌트 내용을 표시해주고 그 필드를 클릭하면 내용이 사라지도록 만들 수 있음
읽기 전용 필드를 만들어 주는 readonly 속성
- readonly 속성은 해당 필드를 읽기 전용으로 바꿈
- readonly=" readonly" 또는 readonly="true" 로 지정
필수 입력 필드를 지정하는 required 속성
- 필수 필드에 필요한 내용이 모두 채워졌는지 검사
- required="required" 라고 지정하거나 required 라고만 해도 됨
05-4 폼에서 사용하는 여러 가지 태그
여러 줄을 입력하는 텍스트 영역 <textarea> 태그
<textarea> 내용</textarea>
드롭다운 목록을 만들어 주는 \, \ 태그
드롭다운 목록은 \ 태그와 \ 태그를 이용해 표시
- \ 태그로 드롭다운 목록의 시작과 끝을 표시
그 안에 \ 태그를 사용해 원하는 항목을 추가
\ 태그에는 value 속성을 이용해 서버로 넘겨주는 값을 지정
\ 태그의 속성 알아보기
\ 태그의 속성 알아보기
버튼을 만들어 주는 \ 태그
<button type="submit">내용</button>
<button type="reset">내용</button>
<button type="button">내용</button>
\ 태그의 속성 알아보기
버튼을 만들어 주는 \ 태그
<button type="submit">내용</button>
<button type="reset">내용</button>
<button type="button">내용</button>
