3. 입력 양식 작성하기
우리는 웹에서 폼을 자주 만난다 !
하나의 웹 페이지 안에서도 여러가지 폼을 사용
→ 아이디와 비밀번호, 로그인 버튼, 회원 가입 등 웹 사이트로 정보를 보낼 수 있는 모든 요소는 모두 폼
▽ 폼에서 사용하는 태그
| 종류 | 설명 |
| <form> | 폼의 시작과 끝 |
| <fieldset> | 폼 요소를 그룹으로 묶음 |
| <legend> | 필드셋에 제목을 붙임 |
| <input> | 사용자가 내용을 입력할 필드를 삽입 |
| <select>,<option> | 드롭다운 목록 삽입 |
| <textarea> | 텍스트를 여러 줄 입력할 수 있는 텍스트 영역 삽입 |
| <datalist> | 데이터 목록 삽입 |
▽ <input> 태그의 유형(type)
| 종류 | 설명 |
| <text> | 한 줄짜리 텍스트 상자 |
| <password> | 비밀번호 입력 필드 |
| <search> | 검색 입력 필드 |
| <url> | URL주소 입력 필드 |
| <email> | 이메일 주소 입력 필드 |
| <tel> | 전화번호 입력 필드 |
| <checkbox> | 2개 이상 선택 가능한 체크 박스 |
| <radio> | 1개만 선택 가능한 라디오 버튼 |
| <number> | 숫자 조절하는 스핀 박스 |
| <range> | 숫자 조절하는 슬라이드 막대 |
| <date> | 사용자 지역 기준 날짜(연, 월, 일) |
| <month> | 사용자 지역 기준 날짜(연, 월) |
| <week> | 사용자 지역 기준 날짜(연, 주) |
| <time> | 사용자 지역 기준 시간(시, 분, 초, 분할 초) |
| <datetime> | 국제 표준시로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초) |
| <datetime-local> | 사용자가 있는 지역 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초) |
| <submit> | 전송 버튼 |
| <reset> | 리셋 버튼 |
| <image> | submit 버튼 대신 사용할 이미지 |
| <button> | 일반 버튼 |
| <file> | 파일 첨부 버튼 |
| <hidden> | 사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드 |
▽ <input> 태그의 속성
| 종류 | 설명 |
| <autofocus> | 웹 문서가 열리면 입력 필드 안에 마우스 포인터를 표시 |
| <placeholder> | 텍스트 필드에 힌트 표시 |
| <readonly> | 입력 필드를 읽기 전용으로 지정 |
| <required> | 필수 입력 필드 지정 |
| <max> | 숫자 입력 필드에서 최댓값을 지정 |
| <min> | 숫자 입력 필드에서 최솟값을 지정 |
| <step> | 숫자 입력 필드에서 증감할 간격 지정 |
| <maxlength> | 최대 길이 지정 |
| <minlength> | 최소 길이 지정 |
| <size> | 회면에 표시할 크기 지정 |
| <list> | 연결할 데이터 목록 지정 |
<input type="checkbox" value="s_3">
<input type="radio" value="yes">
체크 박스, 라디오 버튼에서 사용하는 속성
| 종류 | 설명 |
| value | 선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정, 이 값은 영문이거나 숫자여야 하며 필수 속성 |
| checked | 여러 항목 중에서 기본으로 선태go 놓고 싶은 항목 |
버튼을 만들어 주는 태그는 두가지 방법 사용
- <input type="button" value="버튼에 표시할 내용"> → submit이나 reset같은 기능없고 오직 버튼 형태
- <button type="submit">내용</button> → type= submit, reset, button 중 어떤 동작할지 선택 가능
마무리 문제 ♥♡
1. 다음은 예약 페이지의 일부입니다. 소스의 빈부분을 채워 다음과 같은 폼을 만들어 보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 1</title>
<style>
ul { list-style:none;}
li { line-height:50px; }
label {
width:60px;
float:left;
}
</style>
</head>
<body>
<h1>예약 정보</h1>
<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="예약하기">
</ul>
</form>
</body>
</html>
2. 다음 조건을 만족하도록 소스를 작성해 보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 2</title>
<style>
#container {
width:520px;
border:1px solid black;
padding:20px 40px;
margin:0 auto;
}
fieldset { margin-bottom:15px; }
legend { font-weight:bold; }
ul {list-style-type: none;}
li { line-height:30px;}
</style>
</head>
<body>
<div id="container">
<h1>프런트엔드 개발자 지원서 </h1>
<p>HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.</p>
<hr>
<form>
<h4>개인정보</h4>
<ul>
<li>
<label for="sname"> 이름 </label>
<input type="text" id="sname" autofocus placeholder="공백없이 입력하세요">
</li>
<li>
<label for="snumber"> 연락처 </label>
<input type="text" id="snum">
</li>
</ul>
<h4>지원 분야</h4>
<ul>
<li>
<label><input type="radio" name="field" value="an"> 웹 퍼블리싱</label>
</li>
<li>
<label><input type="radio" name="field" value="pd"> 웹 애플리케이션 개발</label>
</li>
<li>
<label><input type="radio" name="field" value="eng"> 개발 환경 개선</label>
</li>
</ul>
<label>
<h4>지원동기</h4>
<textarea id="motive" cols="60" rows="5" placeholder="본사 지원 동기를 간략히 써 주세요."></textarea>
</label>
<div>
<input type="submit" value="접수하기">
<input type="reset" value="다시 쓰기">
</div>
</form>
</div>
</body>
</html>
'HTML_CSS_JavaScript' 카테고리의 다른 글
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑥ (0) | 2023.03.03 |
|---|---|
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑤ (0) | 2023.03.01 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ④ (0) | 2023.02.28 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ③ (0) | 2023.02.22 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ① (0) | 2023.02.17 |