Preface
이번 장을 끝으로 해당 책의 HTML 파트를 모두 마쳤다.
HTML의 문법 자체는 전체적으로 매우 평이한 수준이라고 생각한다.
그러나 태그들과 해당 태그의 속성들이 너무 다양해서 원하는 형식의 내용을 정확히 작성하기 위해선 많은 경험이 필요할 것 같다.
투자한 시간 대비 실력 향상이 완전한 정비례 관계일 것 같은 느낌?
다음 장부턴 HTML로 작성한 기본 뼈대를 꾸미는 작업을 하는 CSS 공부를 시작한다.
2. 사용자 입력을 위한 input 태그
- type의 number, range 필드에서 사용할 수 있는 속성
1) min: 필드에 입력할 수 있는 최솟값을 지정한다. (디폴트 값: 0)
2) max: 필드에 입력할 수 있는 최댓값을 지정한다. (디폴트 값: 100)
3) step: 숫자 간격을 지정할 수 있다. (디폴트 값: 1)
4) value: 필드에 표시할 초깃값
- 날짜나 시간의 범위 제한
1) min: 범위의 시작 날짜나 시간을 지정한다.
2) max: 범위의 마지막 날짜나 시간을 지정한다.
3) step: 스핀 박스의 화살표를 클릭했을 때 증감시킬 크기를 지정한다.
4) value: 기본적으로 표시할 날짜나 시간을 지정한다.
- type="image": submit 버튼과 같은 기능을 하는 이미지 버튼을 나타낸다.
<input type="image" src="이미지 경로" alt="대체 텍스트">
- button 타입은 onclick 속성을 사용해서 자바스크립트의 window.open( ) 함수와 연결할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>웹 폼</title>
</head>
<body>
<form>
<input type="button" value="공지 창 열기" onclick="window.open('notice.html')">
</form>
</body>
</html>
- type="file"로 지정하면 폼에 파일을 첨부할 수 있다.
→ 웹 브라우저 화면에 '파일 선택'이나 '찾아보기' 버튼 등이 생기고, 해당 버튼을 클릭하고 파일을 선택하면 파일이 첨부된다.
- 히든 필드: 화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소
<input type="hidden" name="이름" value="서버로 넘길 값">
3. input 태그의 주요 속성
- autofocus 속성: 페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시한다.
<input type=텍스트-입력-필드 autofocus>
- placeholder 속성: 사용자가 텍스트를 입력할 때 입력란에 힌트 내용을 표시하며, 그 필드를 클릭하면 내용이 사라진다.
<!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" 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 id="buttons">
<input type="submit" value="주문하기">
<input type="reset" value="취소하기">
</div>
</form>
</div>
</body>
</html>
- readonly 속성: 해당 필드를 읽기 전용으로 바꾼다.
- required 속성: 해당 필드를 비워놓고 제출할 경우 오류 메시지를 출력한다.
4. 폼에서 사용하는 여러 가지 태그
- 텍스트 영역: 폼에서 텍스트를 여러 줄 입력하는 영역
- <textarea> 태그: 텍스트 영역을 만든다.
1) cols: 텍스트 영역의 가로 너비를 문자 단위로 지정한다. (영문자 기준)
2) rows: 텍스트 영역의 세로 길이를 줄 단위로 지정한다.
<textarea></textarea>
- 드롭다운 목록: 목록을 클릭했을 때 옵션이 요소 아래쪽으로 펼쳐지는 목록
- <select> 태그와 <option> 태그: 드롭다운 목록을 만든다.
1) <select> 태그의 속성
① size: 화면에 표시할 드롭다운 항목의 개수를 지정한다.
② multiple: 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용한다.
2) <option> 태그의 속성
① value: 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정한다.
② selected: 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목을 지정한다.
<select>
<option value="값1">내용1</option>
<option value="값1">내용1</option>
</select>
- 데이터 목록: 텍스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값 중에서 선택
- <datalist> 태그와 <option> 태그: 데이터 목록을 만든다.
→ 데이터 리스트의 <option> 태그의 value 속성 값은 텍스트 필드에도 나타난다.
<input type="text" list=데이터 목록 id">
<datalist id="데이터 목록 id">
<option value="서버로 넘길 값1">선택 옵션1</option>
<option value="서버로 넘길 값2">선택 옵션2</option>
</datalist>
- <button> 태그: 폼을 전송하거나 리셋하는 버튼을 삽입한다.
→ 기본 값은 submit이다.
<button type="submit">내용</button>
<button type="reset">내용</button>
<button type="button">내용</button>
'Web Front > HTML + CSS + 자바스크립트' 카테고리의 다른 글
| [CSS] 텍스트를 표현하는 다양한 스타일 (0) | 2022.07.23 |
|---|---|
| [CSS] CSS의 기본 (0) | 2022.07.21 |
| [HTML] 입력 양식 작성하기 (1) (0) | 2022.07.17 |
| [HTML] 웹 문서에 다양한 내용 입력하기 (2) (1) | 2022.07.16 |
| [HTML] 웹 문서에 다양한 내용 입력하기 (1) (0) | 2022.07.15 |
댓글