5-1 입력양식 작성하기
폼 : 웹 상에서 사용자의 정보를 받아들이는 형식
ex) 검색창, 로그인 id, 비밀번호 창
-폼에 입력되는 정보는 웹 브라우저가 알아서 처리하는 게 아니라 웹 브라우저가 서버로 넘겨주는 역할까지만 수행함
-처리하는 것은 서버의 프로그램임
-많은 서버의 기능 중에서 액션이라는 속성--> 기능의 이름을 적어서 적용함
(이 내용은 서버의 내용이기 때문에 생략함)
-입력할 때는 <input>태그를 사용해주고 안의 속성에 맞게 type을 설정하면 된다
-<label>은 내용과 필드를 연결해주는 기능을 한다
폼
폼 : 웹 상에서 사용자의 정보를 받아들이는 형식
ex) 검색창, 로그인 id, 비밀번호 창
-폼에 입력되는 정보는 웹 브라우저가 알아서 처리하는 게 아니라 웹 브라우저가 서버로 넘겨주는 역할까지만 수행함
-처리하는 것은 서버의 프로그램임
-많은 서버의 기능 중에서 액션이라는 속성--> 기능의 이름을 적어서 적용함
(이 내용은 서버의 내용이기 때문에 생략함)
-입력할 때는 <input>태그를 사용해주고 안의 속성에 맞게 type을 설정하면 된다
-<label>은 내용과 필드를 연결해주는 기능을 한다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 폼 삽입하기</title>
</head>
<body>
<form action="">
<label>아이디:<input type="text"></label>
<!-- label태그를 따로 사용하는 경우 :<label for="user-id">아이디:</label>
<input type="text" id="user-id"> -->
<label>비밀번호:<input type="password"></label>
<input type="submit" value="로그인">
</form>
</body>
</html></html>html5로 넘어오면서 과거에는 input의 type을 text로 했었으나 좀 더 세분화 해서 적용을 하게 됨.
ex)email, password, id
5-2
라디오 체크박스 버튼
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>레드향 주문하기</title>
</head>
<body>
<h1>레드향 주문하기</h1>
<form>
<fieldset>
<legend>상품 선택</legend>
<p><b>주문할 상품을 선택해 주세요.</b></p>
<ul>
<li>
<label><input type="checkbox" value="s_3">선물용 3kg</label>
<input type="number">개
</li>
<li>
<label><input type="checkbox" value="s_5">선물용 5kg</label>
<input type="number">개
</li>
<li>
<label><input type="checkbox" value="f_3">가정용 3kg</label>
<input type="number">개
</li>
<li>
<label><input type="checkbox" value="f_5">가정용 5kg</label>
<input type="number">개
</li>
</ul>
<p><b>포장 선택</b></p>
<ul>
<li><label><input type="radio" name="gift" value="yes" >선물 포장</label></li>
<li><label><input type="radio" name="gift" value="no">선물 포장 안 함</label></li>
</ul>
</fieldset>
<fieldset>
<legend>배송 정보</legend>
<ul>
<li>
<label for="user-name">이름 </label>
<input type="text" id="user-name">
</li>
<li>
<label for="addr">배송 주소</label>
<input type="text" id="addr">
</li>
<li>
<label for="mail">메일 주소</label>
<input type="email" id="mail">
</li>
<li>
<label for="phone">연락처</label>
<input type="tel" id="phone">
</li>
</ul>
</fieldset>
</form>
</body>
</html>체크박스는 두개 이상을 선택할 수 있고 라디오 버튼은 하나만 선택할 수 있음
input 안에 value 값을 지정해주어야 함
라디오에서 같은 그룹에서 선택을 하기 위해서는 이름을 똑같이 해주어야 함
number
체크박스 내부에서 화살표를 이용해서 범위를 설정할 수 있는 기능
range
체크박스 내부에서 슬라이드를 이용해서 범위를 설정할 수 있는 기능
(설정할 때 정확한 값을 확인하고 싶은 경우에는 js를 이용해야 함)
Min Max를 활용해서 범위의 한도를 설정할 수 있음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>레드향 주문하기</title>
</head>
<body>
<h1>레드향 주문하기</h1>
<form>
<fieldset>
<legend>상품 선택</legend>
<p><b>주문할 상품을 선택해 주세요.</b></p>
<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>
<p><b>포장 선택</b></p>
<ul>
<li><label><input type="radio" name="gift" value="yes">선물 포장</label></li>
<li><label><input type="radio" name="gift" value="no">선물 포장 안 함</label></li>
</ul>
</fieldset>
<fieldset>
<legend>배송 정보</legend>
<ul id="shipping">
<li>
<label for="user-name">이름 </label>
<input type="text" id="user-name">
</li>
<li>
<label for="addr">배송 주소</label>
<input type="text" id="addr">
</li>
<li>
<label for="mail">이메일</label>
<input type="email" id="mail">
</li>
<li>
<label for="phone">연락처</label>
<input type="tel" id="phone">
</li>
</ul>
</fieldset>
<div>
<input type="submit" value="주문하기">
<input type="reset" value="취소하기">
</div>
</form>
</body>
</html>날짜 표시 기능
과거에는 자바스크립트를 이용해야만 날짜를 표시할 수 있었으나
이제는 date, month, week 등을 활용해서 기능을 구현 할 수 있다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>날짜와 시간</title>
</head>
<body>
<form>
<h1>날짜 지정하기</h1>
<input type="date">
<input type="month">
<input type="week">
<hr>
<h1>시간 지정하기</h1>
<input type="time">
<input type="datetime-local">
<hr>
<h1>범위 제한하기</h1>
<input type="date" min="2020-02-01" max="2020-02-15">
<input type="time">
</form>
</body>
</html>hidden
사용자에게는 보여지지는 않지만 폼양식과 함께 서버로 보내지는 정보
사용자가 입력하는 정보가 아닌 웹 브라우저가 수집하는 정보들
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로그인</title>
</head>
<body>
<form>
<fieldset>
<input type="hidden" name="url" id="url" value="사이트를 통한 직접 로그인">
<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>
</body>
</html>5-3 input 태그의 주요 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>레드향 주문하기</title>
<link rel="stylesheet" href="css/form2.css">
</head>
<body>
<h1>레드향 주문하기</h1>
<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>
</body>
</html>required
꼭 입력해야하는 것을 나타내 주는 속성
입력하지 않으면 꼭 입력해야함을 표시해줌
readonly
수정이 불가능하고 사용자가 읽을 수 있게만 하기 위한 속성
autofocus
사용자가 가장 먼저 접근할 만한 곳에 커서를 두는 속성
textarea
여러줄의 text를 입력하고 싶을 때 사용 cols와 row를 설정해서 사용하면 된다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>레드향 주문하기</title>
<link rel="stylesheet" href="css/order.css">
</head>
<body>
<div id="container">
<h1>레드향 주문하기</h1>
<form>
<fieldset>
<legend>배송 정보</legend>
<ul id="shipping">
<li>
<label for="user-name">이름 </label>
<input type="text" id="user-name">
</li>
<li>
<label for="addr">배송 주소</label>
<input type="text" id="addr">
</li>
<li>
<label for="mail">이메일</label>
<input type="email" id="mail">
</li>
<li>
<label for="phone">연락처</label>
<input type="tel" id="phone">
</li>
<li>
<label for="d-day">배송 지정</label>
<input type="date" id="d-day"> <small>(주문일로부터 최소 3일 이후)</small>
</li>
<li>
<label for="memo">메모</label>
<textarea id="memo" cols="40" rows="4"></textarea>
</li>
</ul>
</fieldset>
<div>
<input type="submit" value="주문하기">
<input type="reset" value="취소하기">
</div>
</form>
</div>
</body>
</html>select
여러 항목 중에서 선택할 수 있는 속성
그 안에는 option태그를 사용해서 사용 그리고 서버로 넘겨 주는 값은 value를 이용해서 설정해 준다
선택된 값에는 selecte가 붙는다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>레드향 주문하기</title>
</head>
<body>
<h1>레드향 주문하기</h1>
<form action="">
<fieldset>
<legend>상품 선택</legend>
<p><b>주문할 상품을 선택해 주세요.</b></p>
<label>
<select>
<option value="special_3" selected>선물용 3kg</option>
<option value="special_5">선물용 5kg</option>
<option value="family_3">가정용 3kg</option>
<option value="family_5">가정용 5kg</option>
</select>
</label>
</fieldset>
<fieldset>
<legend>상품 선택</legend>
<p><b>주문할 상품을 선택해 주세요.</b></p>
<label><input type="text" list="goods"></label>
<datalist id="goods">
<option value="special_3">선물용 3kg</option>
<option value="special_5">선물용 5kg</option>
<option value="family_3">가정용 3kg</option>
<option value="family_5">가정용 5kg</option>
</datalist>
</fieldset>
</form>
</body>
</html>'web-frontend' 카테고리의 다른 글
| 4. 웹 문서에 다양한 내용 입력하기 (0) | 2023.01.08 |
|---|---|
| 3. HTML 기본 문서 만들기 (0) | 2023.01.08 |
| 2. 웹 개발 환경 설정 (0) | 2023.01.08 |
| 1. 웹 개발 시작하기 (0) | 2023.01.08 |