[HTML] form 관련 태그

form

• 사용자로부터 입력을 받기 위한 양식을 작성하는 태그

속성	설명
autocomplete	- 사용자가 이전에 입력한 내용을 가지고 자동완성을 제공 - autocomplete = "off"를 통해 자동완성 해제 가능

---

fieldset

• 비슷한 정보를 그룹별로 묶을 때 사용
• legend는 필수로 입력해야 하는 태그는 X

태그 및 속성	설명
<legend>	- fieldset의  제목을 작성할 때 사용 - 필수 태그는 아님
disabled 속성	- 해당 fieldset의 입력 폼을 비활성화 시킴

<form>
	<fieldset>
		<legend>fieldset 제목</legend>
		<label for="id">ID</label>
		<input type="text" id="id">
	</fieldset>
	<fieldset disabled>
		<legend>fiieldset 제목 (생략 가능) - fieldset 비활성화</legend>
		<label for="pw">PW</label>
		<input type="password" id="pw">
	</fieldset>
</form>

---

input

• name 속성 : HTML상으로 특별한 의미를 갖지 않으며, 각 항목을 받을 때 무엇에 대한 값인지 구분할 수 있도록 정보를 보내는 용도
• input 입력 유형 : https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/tel

 

 

텍스트 - input 타입  

• 텍스트 관련 input 타입 : text, password, search, tel, url 

타입

타입	설명
search	- 텍스트를 입력하면 입력 폼 오른쪽에 x표시가 뜸
tel	- 전화번호 입력 - 유형 입력은 text와 동일하지만, 모바일 브라우저에서 전화번호에 최적화된 키패드 제공 - 다양한 속성은 mdn 자료 확인

속성

속성	설명
maxlength	- 최대 입력 길이 지정 - 정해진 입력 길이 이상으로 입력되지 않음
minlength	- 최소 입력 길이 지정 - 최소 입력 길이가 충족되지 않고 submit 버튼을 누르기 경고창이 뜸
size	- 입력란의 크기 제어 - 입력적에 한번에 표시할 수 있는 문자 수 지정 가

 

<form actione="">
	<input type="text" placeholder="아이디 입력" maxlength="5">
	<input type="password" placeholder="비밀번호 입력" minlength="4">
	<button type="subit">제출</button>
</form>

숫자 - input 타입  

• 숫자 관련 input 타입 :  number, range, date

<style>
/* 스타일을 사용하여 input이 정확하게 입력되는 지 표시 가능 */
input:invalid + span::after {
  content: " ✖";
}

input:valid + span::after {
  content: " ✓";
}

</style>

<form action="">
	<label for="numIp">number</label>
	<input id="numIp" type="number" min="0" max="10">
	<label for="rgIp">range</label>
	<input id="rgIp" type="range" min="0" max="20" step="5">
	<label for="dtIp">range</label>
	<input id="dtIp" type="date" value="2025-06-13" min="2020-01-01" max="2025-12-31">
    <span></span>
</form>

---

button

• type 속성

속성	설명
type="submit"	사용자가 입력한 값을 받는 최종 서버나 특정 페이지 주소로 전송
type="reset"	입력한 내용을 모두 초기화