[HTML] <label> 태그 / <fieldset> 태그
by mini_min[HTML]
<label> 태그 / <fieldset> 태그
✔️ <label> ~ </label> 태그
: 양식 컨트롤 레이블 태그이다.
: 양식 컨트롤에 레이블을 추가하는데 사용한다.
: 사용자의 캡션을 특정한 폼 컨트롤에 연결될 수 있다. for속성을 이용하거나, label 요소 내부로 이동시키는 방법을 사용할 수 있다.
📓 속성
- for : 라벨 요소에 식별자를 지정한다.
- form : 연결되는 폼 소유자!
✔️ <fieldset> ~ </fieldset> 태그
: 양식 필드 세트 태그이다.
: 웹 페이지 내용을 그룹화하는데 사용한다.
: 내용 주위에 박스 라인을 그린다.
: <legend> 태그와 함께 사용하면, 박스에 제목을 넣을 수 있다!
📓 속성
- disabled : 요소를 비활성화
- form : 연결되는 폼의 소유자
- name : 요소에 대한 이름을 지정한다.
🔒 라벨/fieldset 사용 예시 (텍스트 선택시, 체크박스 자동으로 변경)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3> lable 사용 예시 </h3>
<form>
<fieldset>
<legend> 좋아하는 과목 </legend>
<!-- for : 포커스 주는 것 -->
<p>
<input type="checkbox" name="subject" value="자바" id="s1">
<label for="s1">자바</label>
</p>
<p>
<input type="checkbox" name="subject" value="오라클" id="s2">
<label for="s2">오라클</label>
</p>
<p>
<input type="checkbox" name="subject" value="HTML" id="s3">
<label for="s3">HTML</label>
</p>
<p>
<input type="checkbox" name="subject" value="CSS" id="s4">
<label for="s4">CSS</label>
</p>
<p>
<input type="checkbox" name="subject" value="자바스크립트" id="s5">
<label for="s5">javascript</label>
</p>
</fieldset>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3> 파일 관련 태그 </h3>
<form enctype="multipart/form-data" method="post">
<p>
<label> 파일 :
<input type="file" name="selectFile">
</label>
</p>
<p>
<label> 사진 :
<!-- accept 속성 : 파일의 타입에 대해 파일의 종류를 필터링한다. -->
<input type="file" name="photo"
accept="image/png, image/jpg, image/jpeg, image/gif">
</label>
</p>
<p>
<label> 이미지(여러개 선택 가능)
<input type="file" name="images"
accept="image/*" multiple="multiple">
</label>
</p>
<p>
<button type="button">등록하기</button>
</p>
</form>
</body>
</html>
'HTML' 카테고리의 다른 글
| [CSS] CSS 기초 문법 (import / link) (0) | 2022.09.13 |
|---|---|
| [HTML] <img> 태그 / <audio> 태그 (0) | 2022.09.13 |
| [HTML] <button> 태그 type / value, readonly, disable, hidden, image (0) | 2022.09.13 |
| [HTML] 폼 관련 태그 <form> / <input> type 속성값 (0) | 2022.09.13 |
| [HTML] 링크 관련 <a> <link> <iframe> 태그 (0) | 2022.09.12 |
블로그의 정보
개발자 미니민의 개발로그
mini_min