HTML,CSS,Js - HTML 폼 구성.
2024. 7. 30. 20:20ㆍ---Learning (학습)---/HTML+CSS+자바스크립트
728x90
1. form 태그는 폼 양식을 의미.
<form action="#" method="get"></form>2. input 태그는 입력받는 요소를 생성할 때 사용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#" method="get">
<input type="text">
<input type="password">
<input type="tel">
<input type="number">
<input type="url">
<input type="search">
<input type="email">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="button">
<input type="image" src="./facebook.png">
<input type="hidden">
<input type="date">
<input type="datetime-local">
<input type="month">
<input type="week">
<input type="time">
<input type="range">
<input type="color">
<input type="submit">
<input type="reset">
</form>
</body>
</html>
<예시 사진>
3. fieldset 태그는 상호작용요소를 그룹 지을 때 사용합니다.
legend 태그는 그룹 지은 요소들의 이름을 지정할 때 사용합니다.
<form action="#">
<fieldset>
<legend>필수 입력</legend>
<p>
<label for="userid">아이디</label>
<input type="text" id="userid">
</p>
<p>
<label for="password">비밀번호</label>
<input type="password" id="password">
</p>
</fieldset>
<fieldset>
<legend>선택 사항</legend>
<p>
<label for="age">나이</label>
<input type="number" id="age">
</p>
<p>
<label for="recommender">추천인 입력</label>
<input type="text" id="recommender">
</p>
</fieldset>
</form>
<예시 사진>
4. textarea 태그는 여러 줄의 입력 요소를 생성할 때 사용합니다.
<form action="#" method="post">
<fieldset>
<legend>글쓰기</legend>
<P>
<label for="title">제목
<input type="text" id="title" name="title">
</label>
</P>
<p>
<label for="desc">내용
<textarea id="desc" name="desc"></textarea>
</label>
</p>
</fieldset>
</form>
<예시 사진>
5. select 태그는 콤보 박스를 해당 박스에 항목을 추가할 때는 option 태그를 항목들을 그룹으로 묶을 때는 optgroup 태그를 사용합니다.
<form action="#" method="post">
<select name="snack" id="snack">
<optgroup label="감자">
<option value="포카칩">포카칩</option>
<option value="눈을감자">눈을감자</option>
<option value="스윙칩">스윙칩</option>
<option value="수미칩">수미칩</option>
</optgroup>
<optgroup label="빼빼로">
<option value="누드 빼빼로">누드 빼빼로</option>
<option value="아몬드 빼빼로">아몬드 빼빼로</option>
<option value="말차 빼빼로">말차 빼빼로</option>
<option value="다크초코 빼빼로">다크초코 빼빼로</option>
</optgroup>
</select>
</form>
<예시 사진>
5. size 속성은 화면에 노출되는 항목 개수를 지정하는 속성이고, multiple 속성은 여러 항목을 동시에 선택가능한 속성입니다.
<select name="snack" id="snack" size="4" multiple>
<예시 사진>
6. button 태그는 input 태그에서 생성할 수 있고 별도로 버튼 태그로 생성이 가능합니다.
<form>
<button type="submit">
<img src="./facebook.png" alt="버튼">
페이스북
</button>
</form>
<예시 사진>
7. checked 속성은 요소를 선택된 상태로 표시합니다.
<fieldset>
<legend>좋아하는 과자</legend>
<input type="checkbox" id="potato chips" name="potato chips" value="potato chips">
<label for="potato chips">potato chips</label><br>
<input type="checkbox" id="sweet potato chips" name="sweet potato chips" value="sweet potato chips">
<label for="sweet potato chips">sweet potato chips</label><br>
<input type="checkbox" id="pepero" name="pepero" value="pepero">
<label for="pepero">pepero</label><br>
</fieldset>
<예시 사진>
8. placeholder 속성이란 입력값에 대해 힌트를 주는 것입니다.
<form>
<input type="text" placeholder="아이디를 입력하세요.">
</form>
<예시 사진>
728x90
'---Learning (학습)--- > HTML+CSS+자바스크립트' 카테고리의 다른 글
| HTML,CSS,Js - HTML 표 만들기. (0) | 2024.08.07 |
|---|---|
| HTML,CSS,Js - HTML 텍스트 강조. (0) | 2024.07.30 |
| HTML,CSS,Js - HTML 링크와 이미지 넣는 방법. (0) | 2024.07.30 |
| HTML,CSS,Js - HTML 목록 만들기. (0) | 2024.07.29 |
| HTML,CSS,Js - HTML 그룹 짓기. (0) | 2024.07.28 |