👉 입력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- form 요소 -->
<!-- 사용자로부터 데이터(정보)를 입력 받기 위한 HTML 요소들 -->
<!-- <form action="/server/login">
<div>
<label for="email">이메일</label>
<input type="email" id="email">
</div>
<div>
<label for="pw">비밀번호</label>
<input type="password" id="pw">
</div>
<div>
<button>로그인</button>
</div>
</form> -->
<h4>당신이 배우고 싶은 언어는?(다중 선택 가능)</h4>
<div>
<input type="checkbox" name="chk_lang" id="chk_html">
<label for="chk_html">HTML</label>
<input type="checkbox" name="chk_lang" id="chk_css">
<label for="chk_css">CSS</label>
<input type="checkbox" name="chk_lang" id="chk_js">
<label for="chk_js">JavaScript</label>
</div>
<h4>당신이 배우고 싶은 언어는?(하나만 선택 가능)</h4>
<div>
<input type="radio" name="rdo_lang" id="rdo_html">
<label for="rdo_html">HTML</label>
<input type="radio" name="rdo_lang" id="rdo_css">
<label for="rdo_css">CSS</label>
<input type="radio" name="rdo_lang" id="rdo_js">
<label for="rdo_js">JavaScript</label>
</div>
<div>
<label for="favoriteColor">가장 좋아하는 색상은?</label>
<input type="color" id="favoriteColor" value="">
</div>
<div>
<label for="bornDate">태어난 날짜는?</label>
<input type="date" id="bornDate">
</div>
<div>
<label for="arrivalDateTime">입국한 날짜/시간은?</label>
<input type="datetime-local" id="arrivalDateTime">
</div>
<div>
<form action="">
<label for="userEmail">이메일 주소는?</label>
<input type="email" name="" id="userEmail">
<button type="submit">저장</button>
</form>
</div>
<div>
<label for="attachment">파일 첨부</label>
<input type="file" id="attachment">
</div>
<div>
<!-- 사용자의 입력을 받기 위한 용도가 아님 -->
<!-- 대부분 개발자가 사용하기 위해서 쓰는 태그임-->
<input type="hidden" name="email" value="john@gmail.com">
</div>
<div>
<img src="./images/cr1.png" alt="" style="width: 100px; height: auto;">
<input type="image"
src="./images/cr1.png"
style="width: 100px;height: auto;">
</div>
<div>
<label for="yearmonth">생년/월일</label>
<input type="month" id="yearmonth">
</div>
<div>
<label for="">당신의 나이는?</label>
<input type="number" min="0" max="100">
</div>
<div>
<label for="userPass">비밀번호</label>
<input type="password" id="userPass">
</div>
<div>
<form action="">
<label for="phone">전화번호</label>
<input type="tel" id="phone" value="" pattern="^010-\d{4}-\d{4}s">
<button type="submit">저장</button>
</form>
</div>
<div>
<label for="general">일반문자</label>
<input type="text" id="general">
</div>
<div>
<label for="visitTime">예약시간</label>
<input type="time" id="visitTime">
</div>
<div>
<form action="">
<label for="">블로그 주소는?</label>
<input type="url">
<button type="submit">저장</button>
</form>
</div>
<div>
<label for="weekPlan">주간 계획(몇주차)</label>
<input type="week" id="weekPlan">
</div>
<div>
<label for="searchKeyword">검색조건</label>
<input type="search" id="searchKeyword">
</div>
</body>
</html>-
form 요소를 감싸게 되면 형식을 맞춰주는 오타 수정기능이 있다.
(button type="submit"과 연동) -
id와 label for 네임은 반드시 맞춰줘야 함(시각 장애인용 리더기 연동해서 읽혀줌, 편의성을 위해 반드시 필요)
-
input의 type들은 적제적소로 사용하는 것이 굉장히 중요하다.(모바일 환경에서 편의성 차이가 굉장히 크다.)
-
각 id 선택자들은 중복되는 이름을 사용해선 안된다.
-
name은 같은 종류 묶을 때 사용하기 좋음.
-