HTML을 공부 시작한 지 6일 차가 되는 날이다.
- <type> 옵션들
- hidden = 사용자가 입력을 마치고 폼을 서버로 전송할 때 같이 전송되는 요소(사용자 화면에 표시되지 않는다)
- text = (name = 텍스트 필드를 구분할 수 있도록 이름을 붙인다 , size = 넥스트 필드의 길이를 조절 , value = 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 표시될 내용 , maxlength = 텍스트 필드에 입력할 수 있는 최대 문자 개수를 지정)
- password = 화면에 표시될 때 주로 *, · 로 표시된다.
- search = 검색 상자 만드는 요소
- url = url입력란 만드는 요소 (http:// 로 시작하는 사이트 주소를 입력해야 한다)
- email = HTML5에서는 email입력 시 email이 맞는지 자동으로 체크해준다(모바일로 입력하는 경우 가상 키보드 배열이 바뀐다)
- tel = 전화번호 입력란 만드는 요소(모바일로 입력하는 경우 가상 키보드 배열이 바뀐다)
- number = 사용자가 입력한 내용을 숫자로 인식하는 요소 (크롬, 익스플로러 창에서는 일반 텍스트 창으로 표시되지만 파이어폭스에서는 스핀 박스로 표시된다)
- range = 슬라이드 막대를 움직여 숫자 값을 입력하게 한다. (min = 개수의 최솟값 , max =개수의 최댓값 , step = 숫자 간격을 지정 , value = 필드에 표시할 초기값)
- radio , checkbox = 체크박스는 두 개 이상의 항목도 선택할 수 있다. (name = 여러 개의 선택지가 있을 경우 라디오, 체크박스를 구분하기 위해 이름을 지정 (이름이 같은 경우 라디오 박스 중복선택 X) , value = 선택된 값을 서버로 알려 줄 때 넘길 값을 지정(영문이나 숫자) , checked = 기본으로 선택해 놓을 항목이 있을 경우 사용)
- color = 색상표에서 사용자가 색상을 선택할 수 있다. 색상값은 16진수로 표현되며 'red'나 'yellow'같은 이름은 사용할 수 없다.
- date , month , week = date는 연/월/일 , month는 연/월 , week는 연/ 몇 번째 주
- time , datetime , datetime-local = time 시간을 지정할 수 있다 , datetime 국제 표준시로 설정된 날짜와 시간을 넣는다 , datetime-local 사용자가 있는 지역을 기준으로 날짜와 시간을 넣는다
- image = 이미지 버튼을 넣는다. submit버튼 대신 전송 이미지를 넣을 수 있다.
- button = 폼 안에 버튼 형태를 만드는 요소 , 자체 기능이 없기 때문에 스크립트 함수 등을 연결해 사용 value속성을 사용해 버튼에 표시할 내용을 지정 (onclick을 추가해 새 창을 여는 window.open() 함수 연결 가능하다.
- file = 폼에 파일을 첨부
type 옵션들이 너무 많다... 하나씩 작동시켜 보았는데 내가 인터넷을 이용하면서 대부분 당연하듯이 사용했던 기능들이었다는게 되게 놀라웠다.
- <input> 옵션
- autofocus = 웹 문서를 로딩하자마자 지정해 놓은 텍스트 필드에 마투스 커서가 자동으로 표시된다.
- placeholder = 힌트를 표시해준다 , 주로 아이디나 비밀번호같이 표시해 놓고 클릭하면 없어지게 된다.
- readonly = 사용자가 입력하지 못하고 읽게만 하는 옵션
- required = 필수 필드 지정 , 서버로 전송하기 전에 필수적으로 입력해야 하는 내용이 입력되었는지 확인하는 옵션
- min , max , step = min , max 각 해당 필드의 최소값, 최댓값을 지정 , step 허용된 범위 내의 숫자의 일정한 간격을 가리킨다.
- size = 화면에 표시할 텍스트 길이 , minlength = 사용자가 입력해야하는 최소 글자 , maxlength = 사용자가 입력해야하는 최대 글자
지금까지 공부한 내용들을 참고해서 만든 상품 주문서이다.
<!DOCTYPE html>?
<html lang="ko">
<head>
<meta charset = "utf-8">
<style>
.container{
width: 600px;
margin:0 auto;
}
ul {
list-style-type: none;
}
label.title {
font-weight: bold;
width: 80px;
float: left;
}
div.centered {
text-align: center;
}
fieldset {
margin: 15px 10px;
}
fieldset legend {
font-weight: bold;
font-size: 18px;
color: purple;
}
ul li {
margin-bottom: 10px;
}
</style>
<title>상품주문서</title>
</head>
<body>
<div class ="container">
<h1>상품 주문서</h1>
<fieldset>
<legend>개인 정보</legend>
<ul>
<li>
<label for="name" class="title">이름</label>
<input type="text" id="uname" placeholder="여백없이 입력" required>
</li>
<li>
<label for="tel1" class="title">연락처</label>
<input type="text" id="tel1" placeholder="연락가능한 번호">
</li>
</ul>
</fieldset>
<fieldset>
<legend>배송지 정보</legend>
<ul>
<li>
<label for="addr" class="title">주소</label>
<input type="text" size ="40" id="addr" required>
</li>
<li>
<label for="tel2" class="title">전화번호</label>
<input type="text" id="tel2" required>
</li>
<li>
<label for="memo" class="title">메모</label>
<textarea cols="40" rows="3" id="memo" ></textarea>
</li>
</ul>
</fieldset>
<fieldset>
<legend>주문 정보</legend>
<li>
<label><input type="checkbox">과테말라 안티구아 (100g)</label>
<label><input type="number" value="0" min="0" max="5">개</label>
</li>
<li>
<label><input type="checkbox">인도네시아 만델링 (100g)</label>
<label><input type="number" value="0" min="0" max="5">개</label>
</li>
<li>
<label><input type="checkbox">탐라는 도다(블렌딩) (100g)</label>
<label><input type="number" value="0" min="0" max="5">개</label>
</li>
</fieldset>
<div class="centered">
<input type="submit" value="주문하기">
<input type="reset" value="다시 작성">
</div>
</div>
</body>
</html>
style부분 css는 배우지 않아 책에 있는 내용을 그대로 옮겨왔다.
나머지 부분들은 책을 참고하여 기억을 더듬으며 만들었다.
태그 종류들이 너무 많아서 태그들끼리 헷갈리는 부분들이 많았다. 많이 연습해야 할 것 같다.
'HTML' 카테고리의 다른 글
| [Chapter 4-연습문제] HTML5 공부 8일차! (2021-07-06) (0) | 2021.07.06 |
|---|---|
| [Chapter 4-3] HTML5 공부 7일차!(2021-07-05) (0) | 2021.07.06 |
| [Chapter 4-1] HTML5 공부 5일차! (2021-07-03) (0) | 2021.07.04 |
| [Chapter 3 - 연습문제] HTML5 공부 4일차!(2021-07-01) (0) | 2021.07.01 |
| [Chapter 3] HTML5 공부 3일차 (2021-06-30) (0) | 2021.07.01 |