< Code diaries />

TAG 05 - 폼에 관련된 태그와 <datalist> 본문

Html

TAG 05 - 폼에 관련된 태그와 <datalist>

ejey 2024. 6. 6. 22:33

 

HTML(Hyper Text Markup Language)

 

 

 

 

<body> 태그내에 사용할 수 있는 HTML TAG를 알아보아요~

 

 

TAG LIST

Tag Description Meaning
<form> 폼 그룹 태그이다.  
<fieldset> 필드들을 그룹을 묶어 줄 수 있다.  
<legend> <fieldset>태그의 첫번째 child element로 꼭 존재해야하며, 필드그룹의 제목을 표시한다.  
<label> 폼필드의 레이블 태그이다. 연결해주는 방법은 명시적인방법과 암묵적인 방법 두가지가 있다.  
<input> 폼필드 명령어이며, type에 따라 다양한 형태로 존재한다.  
<button> 버튼을 만드는 태그이며 종류는 3가지 이다.  
<select> 드롭다운 메뉴그룹 태그이다. <option>태그와 셋트로 사용된다.  
<optgroup> <select>메뉴내에 <option>이 많을경우 그룹으로 여러개 묶을 때 사용한다.  
<option> <select>태그의 선택할 수 있는 메뉴리스트 이다.  
<textarea> 여러줄을 입력할 수 있는 텍스트필드이다. 컨텐츠는 공백병합현상이 일어나지 않으며, Text만 입력할 수있다.  
<datalist> <input> 창에 미리 항목들을 만들어 놓고 선택하게 할 수 있다.
글자를 입력하면 미리 준비된 <option>목록에 따라 자동완성기능을
구현해준다. 와우!!

이때에 <input list="name"> list속성값을 <datalist id="name"> 아이디와 동일하게 맞춰 주어야 한다.

자동완성기능을 Javascript를 쓰지않고 구현이 가능하게 된것이다.^^		 MDN 참고사이트 보기
<details> ,
<summary>		 내용을 폴더식으로 접었다 폈다 하면서 내용을 적을 수 있는 태그 이다.
open이라는 속성을 넣으면 열림설정이 True가 되어 열고,닫았는지에 대한 확인도 가능하고 css 설정도 가능하다.

또한 name값을 동일하게 주면, radio 버튼처럼 선택적으로 open되게 할 수 있다.

<details  name="box" open>
     <summary>요약제목</summary>
     오픈되었을 때에 보여질 내용넣는 부분
</details>

<details name="box">
     <summary>요약제목</summary>
     오픈되었을 때에 보여질 내용넣는 부분 
</details>		 MDN 참고사이트 보기

 

 

 

 

자, 어렵지 않아요~ 우리 영혼 챙겨가며 계속 공부해봅시다잉~~~!

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

하지만, 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.

 

반응형
저작자표시 비영리 변경금지

'Html' 카테고리의 다른 글

TAG 03 - 링크와 이미지관련 태그  (0) 2024.06.10
TAG 06 - 미디어 및 기타 태그, <details>  (0) 2024.06.06
TAG 04 - 표를 만드는 태그  (0) 2024.06.06
TAG 02 - 제목과 글자를 다루는 태그, 기타 태그  (4) 2024.06.06
TAG 01 - 영역을 분리하는 태그(Semantic Tags)  (2) 2024.06.06
'Html' Related Articles more