반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<fieldset>
<legend>로그인</legend>
<label>아이디 : <input type="hidden" id="user_id"></label>
<!-- input 박스 보이지 않음 -->
<label>아이디 : <input type="text" id="user_id" size="15"></label>
<label for="user_pw">비밀번호 : </label>
<input type="password" id="user_pw" placeholder="패스워드를 입력하세요.">
<button>로그인</button>
</fieldset>
<fieldset>
<legend>체크박스/라디오버튼</legend>
<div>
<label><input type="checkbox" value="1">독서</label>
<label><input type="checkbox" value="2">영화</label>
<label><input type="checkbox" value="3">운동</label>
</div>
<div>
<label><input type="radio" name="gender" value="m">남자</label>
<label><input type="radio" name="gender" value="f">여자</label>
</div>
<div>
<label><input type="radio" name="dept" value="m">컴퓨터학과</label>
<label><input type="radio" name="dept" value="f">기계학과</label>
</div>
</fieldset>
<fieldset>
<legend>그외 input</legend>
<label>개수 : <input type="number" min="0" max="5"></label>
<label>개수 : <input type="range" min="0" max="5"></label>
<label>메일 : <input type="email"></label>
<label>연락처 : <input type="tel"></label>
<label>날짜 : <input type="date"></label>
<label>전송 : <input type="file"></label>
<label>전송 : <input type="submit"></label>
<br>
<select>
<option value="java">자바</option>
<option value="c">C언어</option>
<option value="db" selected>DB</option>
</select>
<br>
<textarea cols="50" rows="5"></textarea>
</fieldset>
</form>
</body>
</html>반응형
'HTML&CSS' 카테고리의 다른 글
| [CSS] 로그인 화면 만들기_0407 8교시 (0) | 2023.04.07 |
|---|---|
| [HTML&CSS] 포스터 만들기 (0) | 2023.04.06 |
| [HTML] INPUT 태그 연습 (0) | 2023.04.05 |
| HTML 테이블 생성 (0) | 2023.04.04 |
| HTML 태그 종류 (1) | 2023.04.04 |