Front/HTML

1.HTML - 3

잘잔디 2023. 3. 29. 14:12

입력 양식 작성하기

폼 삽입하기

웹에서의 폼

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

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