html & css/개념
form 요소
by Doo Hee
2023. 6. 19.
<!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태그를 사용한다.-->
<!-- form 태그 안에 사용자로부터 정보를 입력받는 그 form 요소들을 작성한다. -->
<form>
<div>
<label for="email">이메일</label>
<!-- action - 정보를 받을 서버 주소를 작성 -->
<!-- form으로 감싸진 정보가 한번에 전송된다. -->
<!-- form 태그를 사용하지 않는 추세 -->
<input type="email" id="email" />
<!-- 타입의 종류에 따라 입력받는 정보의 유형과, 화면에 보여지는게 달라진다. -->
<!-- 유일하게 태그명으로 구분할 수 없고, type이라는 속성을 통해서 구분이 가능하다. -->
</div>
<div>
<label for="password">비밀번호</label>
<input type="password" id="password" />
</div>
<div>
<button>로그인</button>
</div>
</form>
<!-- 아이디, 비밀번호, 로그인은 한번에 정보를 받으니 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>
<!-- name - 같이 묶여있는 체크박스이구나, 하나의 그룹(선택지)인지 알 수 있다. -->
<!-- 하나의 선택지 내에 있는 옵션이라는 것을 알 수 있다. -->
</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>
<!-- name으로 그룹을 묶지 않으면 같은 선택지로 인식되지 않아 다중 선택이 가능해진다. -->
</div>
<div>
<label for="favoriteColor">가장 좋아하는 색상은?</label>
<input type="color" id="favoriteColor" />
</div>
<div>
<label for="birthday">태어난 날짜는?</label>
<input type="date" id="birthday" />
</div>
<div>
<label for="arrivalDateTime">입국한 날짜 시간은?</label>
<input type="datetime-local" id="arrivalDateTime" />
</div>
<div>
<form>
<label for="userEmail">이메일 주소는?</label>
<input type="email" id="userEmail" />
<button type="submit">저장</button>
</form>
<!-- form 태그 안에 있는 이메일은 이메일 점검이 가능하다. -->
<!-- submit - submit을 감싸고 있는 form 태그를 찾아 form에 있는 서버주소로 모든 데이터를 보냄-->
</div>
<div>
<label for="file">파일 첨부</label>
<input type="file" id="file" />
</div>
<div>
<input type="hidden" id="" />
<!-- 사용자의 입력을 받기위한 용도가 아니라 대부분 개발자가 사용하기 위해 쓰는 태그 -->
</div>
<div>
<img src="./img/cat.jpg" style="width: 100px; height: auto" />
<input
type="image"
src="./img/cat.jpg"
style="width: 100px; height: auto"
/>
<!-- 버튼이나 링크의 역할을 가지는 속성, 마우스를 사진에 갖다대면 손모양으로 바뀐다. -->
</div>
<div>
<label for="yearMonth">생년/년월</label>
<input type="month" id="yearMonth" />
</div>
<div>
<label for="age">당신의 나이는?</label>
<input type="number" id="age" min="0" />
<!-- min, max 최소, 최대-->
</div>
<label for="">비밀번호</label>
<input type="password" />
<div>
<form>
<label for="phone">전화번호</label>
<input type="tel" id="phone" />
<button type="submit">저장</button>
</form>
</div>
<div>
<label for="general">일반문자</label>
<input type="text" id="general" />
<!-- text- 모든 문자를 입력받을 수 있는 것-->
</div>
<div>
<label for="visitTime">예약시간</label>
<input type="time" id="visitTime" />
</div>
<div>
<form>
<label for="url">블로그 주소는?</label>
<input type="url" id="url" />
<button type="submit">저장</button>
</form>
</div>
<div>
<label for="week">주간 계획(몇주차)</label>
<input type="week" id="week" />
</div>
<div>
<label for="">검색조건</label>
<input type="search" />
<!-- X 표시가 있어서 삭제할 수 있다.-->
</div>
</body>
</html>
