프론트엔드 개발자/CSS
html css form요소 파악하기
신디블로그
2023. 3. 22. 15:18
SMALL
<!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>
<style>
* {
padding: 50px;
}
</style>
<body>
<!-- 폼기본형 -->
<form action="">
<fieldset>
<legend>인풋요소</legend>
<input><br><!-- 폼 개별요소 작성위치 -->
<input type="text" name="" id=""><br>
<input type="password" name="" id=""><br>
<input type="radio" name="" id=""><br>
<input type="checkbox" name="" id=""><br>
</fieldset><!-- 폼요소를 그룹핑 -->
<fieldset>
<legend>버튼요소</legend><!-- 폼 개별요소 작성위치 -->
<button>로그인</button>
</fieldset><!-- 폼요소를 그룹핑 -->
<fieldset>
<legend>셀렉트</legend><!-- 폼 개별요소 작성위치 -->
<select name="" id="">
<option value="">010</option>
<option value="">070</option>
<option value="">011</option>
</select>
</fieldset><!-- 폼요소를 그룹핑 -->
<fieldset>
<legend>글상자</legend><!-- 폼 개별요소 작성위치 -->
<textarea>글을적어보자</textarea>
</fieldset><!-- 폼요소를 그룹핑 -->
</form><!-- 폼의시작과 끝 -->
</body>
</html>
LIST