1.HTML - 3

입력 양식 작성하기

폼 삽입하기

웹에서의 폼

• form = HTML의 component
• component = 사용자와의 상호 작용을 용이하게 하기 위한 GUI 기반의 구성요소를 말함.
• 사용자가 웹 사이트로 정보를 보낼 수 있는 모든 요소들을 폼이라고 함.
• 폼과 관련된 대부분의 작업들은 정보를 저장하거나 검색하거나 수정하는 일들
• 이런 작업은 모두 데이터베이스르 기반으로 한다.
• 아이디를 입력하는 텍스트 필드나 버튼 같은 폼의 형태를 만드는 것은 HTML 태그
• 폼에 입력한 사용자 정보를 처리하는 것은 ASP나 PHP 같은 서버 프로그래밍을 이용

form 태그

• 폼을 만드는 기본 태그
• 제출 버튼을 만들어 제출을 누를 경우 action에 지정된 다른 페이지로 넘어갈 수 있도록 할 수 있다.
• 여러 폼 요소

form 태그의 속성

• : 폼에 내용을 입력하고 서버로 전송했을 때 서버에 있는 register.php를 실행한다.

fieldset 태그

• 폼 요소를 그룹으로 묶는 태그

legend 태그

• fieldset으로 그룹으로 묶는 구역에 제목을 붙이는 태그

label 태그

• input 태그와 같은 폼 요소에 레이블을 붙일 때 사용

<fieldset>
    <legend> 배송 정보></legend>
    <label for="addr">배송 주소 :</label>
    <input type="text" id = "iddr"><br>
</fieldset>

input 태그

• 사용자가 입력하는 부분은 거의 input 태그를 이요해 처리함
• type 속성 값에 따라 함께 사용할 수 있는 속성들도 달라진다.

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

text 타입

• 한 줄짜리 텍스트 입력 필드
• 주로 아이디나 이름, 주소 등 텍스트 입력

password 타입

• 비밀번호 입력란
• 사용자가 입력하는 내용이 * 로 표시됨

텍스트 필드와 비밀번호 필드의 속성들

• password 필드에는 value 속성은 없다고 함

search 타입

• 검색 필드
• 검색 창이 x표시가 되어 검색어 삭제가 쉬움

url 타입

• 웹 주소 필드
• http://로 시작하는 사이트 주소 입력

email 타입

• 메일 주소 입력 필드
• 메일 주소 형식을 자동으로 체크하여 틀리다면 오류 메시지 출력

tel 타입

• 전화번호 입력 필드
• 사용자 입력을 체크하지는 않음.

<fieldset>
    <legend>로그인 정보</legend>
    <label >아이디 : <input type = "text" class="box1"></label>
    <label >비밀번호 : <input type = "password" class="box2"></label>
    <input type = "button" value = "로그인">
</fieldset>
<fieldset>
    <legend >배송 정보</legend>
    <label for = "orderItem">주문상품 : </label>
    <input type="text" id = "orderItem" value = "상품AG1001" readonly><br>

    <label for = "userName" >이름 : </label>
    <input type="text" id = "userName" autofocus><br>

    <!-- 주문상품, 이름입력정보는 완료-->
    <label for="addr">배송 주소 :</label>
    <input type="text" id = "iddr"><br>

    <label for="email">이메일 :</label>
    <input type="email" id = "email" size="40" required><br>

    <label for="phone">연락처 :</label>
    <input type="tel" id = "phone" size = "30" placeholder="연락처를 입력해주세요 010-1234-5678" required pattern="[0-1]{3}-[0-9]{3,4}-[0-9]{4}"><br>

        <label for="ddate" >배송 지정일 :</label>
    <input type="text" id = "ddate"><br>

</fieldset> 
<input type="submit" value = "test">

radio 타입

• 여러 항목 중 하나만 선택할 때

checkbox 타입

• 여러 항목 중 둘 이상을 선택할 때

라디오 버튼, 체크박스에서 사용하는 속성

<fieldset>
    <legend> 상품 선택></legend>
    <p>주문할 상품을 선택해 주세요.</p>
    <label><input type="checkbox" value="s_3">선물용 3kg</label>
    <label><input type="checkbox" value="s_5">선물용 5kg</label>
    <label><input type="checkbox" value="f_3">가정용 3kg</label>
    <label><input type="checkbox" value="f_5">선물용 5kg</label>
    <p>포장 선택.</p>
    <label><input type="radio" name = "gift" value = "yes">선물 포장</label>
    <label><input type="radio" name = "gift" value = "no">기본 포장</label>
</fieldset>

number 타입

• 숫자 입력 필드 브라우저에 따라 스핀 박스로 표시됨

range 타입

• 숫자 입력 필드 슬라이드 막대를 이용해 숫자 입력

숫자 입력 필드에서 사용하는 속성

date, month, week 타입

```css
<input type = "date">
<input type = "moth">
<input type = "week">

time , datetime-local 타입

<input type = "time">
<input type = "datetime-local">

 

submit , reset 타입

• 폼 전송/리셋 버튼
• 전송(submit) 버튼 : 사용자 입력 내용을 서버로 전송
• 리셋(reset) 버튼 : 사용자 입력 내용 전부 삭제
• value 속성을 이용해 버튼 표시 내용 지정

<input type="submit" value = "주문하기" >
<input type="button" value = "취소하기" >

image 타입

• input type = “image” src = “이미지 경로” alt = “대체 텍스트로 submit 버튼을 대신하여 이미지 삽입이 가능하다.

button 타입

• 기능 없이 버튼 형태만 삽입
• 주로 버튼 클릭해서 자바스크립트 실행할 대 사용
• value 속성을 이용해 버튼 표시 내용 지정

<input type="button" value = "공지 창 열기" onclick="window.open('https://mbspear.tistory.com/')">

file 타입

• 파일 첨부
• ‘파일 선택’ 이나 ‘찾아보기’ 버튼으로 표시됨

<input type="file">

hidden 타입

• 화면 상의 폼에는 보이지 않는다.
• 폼을 서버로 전송할 때 서버로 함께 전송되는 요소이다
• input type = “hidden” name = “이름” value = “서버로 넘길 값”

input 태그의 다양한 속성

autofocus

• 페이지를 불러오자마자 원하는 폼 요소에 마우스 커서 표시

placeholder

• 입력란에 표시하는 힌트로 필드를 클릭하면 사라짐

<label for = "user-name">이름</label>
<input type="text" id = "user-name" autofocus>

<label for = "phone">연락처</label>
<input type="tel" id = "phone" placeholder="하이픈 빼고 입력해 주세요.(01012345678)">

readonly

• 내용을 보기만 하고 입력하지 못하게 함.

required

• 필수 필드 체크
• 필수 필드는 브라우저에서 직접 체크하는 것이므로 오류 메시지 내용은 브라우저들마다 다르게 나타남

min, max, step

• min, max : 해당 필드의 최솟값, 최댓값
• step : 허용된 범위 내의 숫자 간격
  • type이 date, datetime, datetime-local, month, week, time, range, number 일 경우에만 사용

size, minlength, maxlength

• size : 텍스트 관련 필드에서 화면에 몇 글자까지 보이게 할지를 결정
• maxlength : 입력 가능한 최대 글자
• minlength : 입력해야 할 최소 글자

여러 데이터 나열해 보여주기

select, optgroup, option

• 여러 옵션 중에서 선택 - 드롭다운 목록
• 공간을 최소한으로 사용하면서 여러 옵션 표시가 가능하다.

<select id="class">
        <option value="archi">건축공학과</option>
        <option value="mechanic">기계공학과</option>
        <option value="indust">산업공학과</option>
        <option value="elec">전기전자공학과</option>
        <option value="computer" selected>컴퓨터공학과</option>
        <option value="chemical">화학공학과</option>
    </select>

select 태그의 속성

• size : 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정한다
• multiple : 브라우저 화면에 여러 개의 옵션이 함께 표시되면서 Ctrl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있다.

option 태그의 속성

• value : 옵션을 선택했을 때 서버로 넘겨질 값을 지정합니다.
• selected : 화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정합니다.

select, outgroup, option

<select id="class">
	<optgroup label="공과대학">
		<option value="archi">건축공학과</option>
		<option value="mechanic">기계공학과</option>
		<option value="indust">산업공학과</option>
		<option value="elec">전기전자공학과</option>
		<option value="computer">컴퓨터공학과</option>
		<option value="chemical">화학공학과</option>
	</optgroup>
	<optgroup label="인문대학">
		<option value="history">사학과</option>
		<option value="lang">어문학부</option>
		<option value="philo">철학</option>
	</optgroup>
</select>

datalist , option

• 데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동으로 데이터 필드에 입력됨
• 데이터 목록에 id를 이용해 이름을 붙이고,
• input 태그의 list 속성에 데이터 목록 id를 지정함

텍스트 영역 textarea

• 여러 줄의 텍스트 입력
• 게이판 글 입력 양식, 사용자 약관 등
• textarea 내용

textarea 태그의 속성

<label for = "memo">메모</label>
<textarea id="memo" cols="40" rows="4"></textarea>

기타 다양한 폼 요소들

button

• 다양한 형태의 버튼 삽입
• 화면 낭독기에서 버튼임을 정확히 전달할 수 있음
• CSS를 이용해 원하는 형태로 꾸밀 수 있음

button 속성 값

• submit : 폼을 서버로 전성합니다.
• reset : 폼에 입력한 내용을 초기화시킵니다
• butto : 버튼 형태만 만들 뿐 자체 기능은 없습니다.

output

• 계산 결과를 브라우저에 표시

progress

• 작업 진행 상태를 브라우저에 표시

meter

• 전체 크기 중에서 얼마나 차지하는지를 표현할 때 사용