2024.08.14. HTML - form 태그

* 폼 안에서 여러 구역 나누기 

- <fieldset> : 하나의 폼안에서 여러구역을 나누어 표시할 때 사용.

- <legend> : <fieldset> 태그로 묶은 그룹에 제목을 붙일 때 사용.

- <label> : <input> 태그와 같은 폼 요소에 레이블을 붙일때 사용. 레이블은 입력란 가까이에 표시하는 텍스트. label 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 웹브라우저가 알 수 있다.  사용방법1. <input>태그안에 폼요소를 넣어서 사용. 2. 떨어져 사용할때는 id속성값을 label 태그의 for 속성에게 알려줌. 아이디 글자를 클릭해도 input 태그 안으로 커서가 자동이동한다. 

 

<fieldset>
    <legend>로그인</legend> 
    	<!-- label 태그 1번째 방법 -->
    	<label>아이디(6자이상) : <input type="text"></label><br>
        <!-- label 태그 2번째 방법 -->
    	<label for="user-id">아이디(6자이상) : </label>
	<input type="text"><br>
</fieldset>

결과화면

 

* 입력양식(컨트롤) 작성 : input 태그
- size : 상자 너비만 줄어들뿐, 글은 길게 적을 수 있다. 
- maxlength="5" : 5글자만 적을 수 있다.
- input type 속성 : email, url, search, tel, checkbox, radio , 
  search 속성 : <input type="search" name="search"><br> : 자동완성기능이나 x표시를 만들어서 취소를 할 수 있다. 

  checkbox, radio 속성 : name 값은 동일하게 value 값을 다르게 지정함. 

  checkbox : on/off 기능 활용하여 토글(toggle)기능 사용가능

- 숫자입력 필드를 나타내는 type="number"(스핀단추), type="range"(슬라이드바)  ...

<!-- 초기값은 5고, 1부터 10까지 2씩 증가함. -->
type = number(스핀단추 형식) : <input type="number" min="1" max="10" step="2" value="5">

- 날짜입력 필드를 나타내는 type="date", "month", "week"

- 시간입력 필드를 나타내는 type="time", "datetime-local"

- number(스핀단추), range(슬라이드바) 속성값

  <input type="number">
  <input type="range">

 

* 문서내에 레이아웃(영역) 지정해서 요소(tag) 넣기
 1) div 태그 : division의 약자로 문서내에서 레이아웃(영역)을 만들때 주로 사용한다.
    태그 자체로는 의미를 가지지 않는다. (요소(tag) OR 문자 OR 문자열 등을 넣어서 가지고 있는 빈공간의 역할.)
   div는 전체적으로 다 차지를 하기때문에 두개를 나란히 배치를 할 수 없다. <->input 태그는 옆으로 달라붙어 나옴. 
  너비를 줄여도 두번째 div와 나란히 붙지않는다.

<div style="background-color: yellow; width:150px; height:150px; border:10px solid black;">
	첫번째 div 영역
</div>
<div style="background-color: orange; width:150px; height:150px; border:10px solid black;">
	두번째 div 영역
</div>

요소가 자리를 다 차지해서 밑으로 내려감.

 2) span 태그 : 문서내에서 레이아웃(영역)을 만들때 주로 사용한다. div 처럼 자신만의 높이와 너비를 가질 수가 없다.
     span은 다른태그 옆에 바로 붙어서 나온다. 내용을 다른 태그 사이의 공간에 일부만 넣어서 사용한다.
     width, height를 지정해도 그만큼 커지는 것이 아니라 글자의 수 만큼만 커진다.width, height가 소용없다.
     그리고 옆에 계속 붙어 나옴.

<p>span 태그 자체로 영역의 크기를 가질 수 없다.</p>
<span style="background-color: orange; width:150px; height:150px; border:10px solid black;"> 오늘은 </span>
<span style="background-color: yellow; width:150px; height:150px; border:10px solid black;"> HTML </span>
<span style="background-color: green; width:150px; height:150px; border:10px solid black;"> 공부하는 날 </span>

 

width 속성이 듣지않고 글자만큼 너비가 제각각이다.

 

<h3> input type 속성(날짜 입력 전용): date, month, week 속성값 </h3>
가입기한 : 2024-08-01 ~ 2024-08-20까지만 날짜 입력 받기<br>
<input type="date" min="2024-08-01" max="2024-08-20"><br>

<h3> input type 속성(시간 입력 전용): time, datetime-local 속성값 </h3>
가입기한 : 2024-08-01(00:01) ~ 2024-08-20(23:59)까지만 날짜 입력 받기<br>
<input type="datetime-local" min="2024-08-01T00:01" max="2024-08-20T23:59">

 

type="time" 8월20일까지만 날짜 선택을 할 수 있다.	type="datetime-local" 8월20일까지만 날짜 선택을 할 수 있다. 날짜뿐 아니라 시간까지 지정할 수 있다.