728x90
반응형
form 요소
- 보통은 form 이라는 요소를 통해 그 안의 정보를 로그인등의 이름으로 묶어 전달해주는 용도로 주로 사용되었지만 헌재는 리엑트등 spa(single page application)의 사용으로 용도가 맞지않는 경우가 발생되어 최근에는 잘 쓰지않는 추세이다. 프론트엔드 프레임워크를 사용하면 form 태그 없이 spa로 전송하여 사용가능하다.
- input의 email옵션은 form 태그 안에 있으면 자동으로 이메일의 양식인지 검사해준다. 다만 이 경고창의 디자인은 변경이 부락하기 떄문에 웹 전체의 디자인을 위해 일부러 안는 경우도 있다.
- submit type을 가진 버튼을 누르면 form의 action안에 있는 곳으로 그 모든 정보를 전달해준다.
- 라벨로 체크 박스를 연결해주면 글자를 선택해도 체크박스의 이용이 가능해지며 연결성이 좋다.
- name은 그 버튼들이 하나의 그룹이라고 묶는 옵션이다
- color는 헥스값으로 value에 저장된다.
- 같은 html 태그 안에서 id는 항상 달라야하므로 id가 겹치는 것에 주의 하자.
- 같은 이미지 파일을 넣을떄 img태그로도넣을 수 있고 input태그의 타입을 바꿔 넣을 수도 있다. input은 마우스 모양이 이미지에 대면 바뀌는 데 보통 버튼의 용도로 쓰기떄문이다. 하지만 실무에서는 img태그를 주로 쓴다.
<!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="/sever/login">
<div>
<label for="">이메일</label>
<input type="email" id="email" />
</div>
<div>
<label for="">비밀번호</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="">가장 좋아하는 색상은?</label>
<input type="color" id="favoroteColor" value="" />
</div>
<div>
<label for="">태어난 날짜는?</label>
<input type="date" id="bornDate" />
</div>
<div>
<label for="">입국한 날짜/시간은?</label>
<input type="datetime-local" id="arrivalDataTime" />
</div>
<div>
<form action="">
<label for="userEmail">이메일 주소는?</label>
<input type="email" name="" id="userEmail" />
<button type="submit">저장</button>
</form>
</div>
<div>
<label for="">파일 첨부</label>
<input type="file" id="attachment" />
</div>
<div>
<!-- 사용자의 입력을 받기위한 용도가 아님 -->
<!-- 대부분 개발자가 사용하기 위해서 쓰는 태그임 -->
<input type="hidden" name="email" value="star@moon.com" />
</div>
<div>
<img
src="./img/하이큐 배경.jpg"
alt=""
style="width: 100px; height: auto"
/>
<input
type="image"
src="./img/하이큐 배경.jpg"
style="width: 100px; height: auto"
/>
</div>
<div>
<label for="">생년/년월</label>
<input type="month" id="yearmonth" />
</div>
<div>
<label for="">당신의 나이는?</label>
<input type="number" min="0" max="10" />
</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}$" />
<button type="submit">저장</button>
</form>
</div>
<div>
<label for="">일반무자</label>
<input type="text" id="general" />
</div>
<div>
<label for="">예약시간</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="">검색조건(엑스로 삭제 가능 모바일에서 서치 ui로 바뀜)</label>
<input type="search" id="searchKeyword" />
</div>
</body>
</html>728x90
반응형
'HTML & CSS' 카테고리의 다른 글
| form 요소(2) (0) | 2023.10.22 |
|---|---|
| input요소의 주요 속성 (2) | 2023.10.12 |
| 목록 태그, 표 태그 (0) | 2023.10.03 |
| 의미에 맞는 태그 (2) | 2023.10.02 |
| HTML의 기본 구조, 요소, 속성 (2) | 2023.10.02 |