양식 태그

	<fieldset>
		<legend>고객 정보</legend>
	</fieldset>

label, input

label은 사용자 편의를 위해 사용되며 ID라는 문자를 클릭해도 입력 창에서 포커스를 잡습니다.

입력 창에 초점을 맞추려면 label for=”http://ldh1123./m/”의 값을 input의 id=”http://ldh1123./m/” 값으로 맞춰야

input은 입력 윈도우를 만듭니다.

name 값은 중복될 수 있지만 id 값은 중복되지 않아야 합니다.

maxlengh는 최대 입력 수 제한, 프론트 또는 백엔드에서 제한합니다 (악의적 인 사용자 해킹을 방지하기 위해 개발자 모드와 같은 ..)

size는 입력 창의 너비를 제한합니다.

            <input type="text" name="id" id="id" maxlength="10" size="10">
            
           
           <!
-- 현업에서 쓰는 암시적인 label,위의 label은 명시적, 명시적으로 적기를 권장 -->
            
            <label>
                ID_1
            	<input type="text" name="id_1" id="id_1">
            </label>

label for=”http://ldh1123./m/” pw, search, url, email, tel

pw는 입력값을 *로 표시

검색은 브라우저가 입력창을 검색창으로 인식하게 한다.

url은 웹 주소를 입력하고 웹 주소가 올바른지 확인합니다.

이메일은 이메일 양식이 올바른지 확인합니다.

tel은 전화번호, PC에서는 확인하지 않고, 모바일에서 키패드가 오르면 숫자패드로 오른다

            <label for="pw">PW</label>

            <input type="password" name="pw" id="pw" maxlength="15" size="10">

            <label for="search">search</label>
            <input type="search" name="search" id="search">

            <label for="url">url</label>
            <input type="url" name="url" id="url">

            <label for="email">email</label>
            <input type="email" name="email" id="email">
            
            <label for="tel">tel</label>
            <input type="tel" name="tel" id="tel">

checkbox

확인란을 만들고 보통 div로 둘러싸

            <ul>
                <li>
                    <label for="sb">딸기</label>
                    <input type="checkbox" name="sb" id="sb">
                </li>
                <li>
                    <label for="banana">바나나</label>
                    <input type="checkbox" name="banana" id="banana">
                </li>
                <li>    
                    <label for="wm">수박</label>
                    <input type="checkbox" name="wm" id="wm">
                </li>
            </ul>

라디오

하나만 확인할 수 있는 확인란을 만들어 name 값을 하나로 통합해야 합니다.

value=”http://ldh1123./m/” 안에는 백엔드에 전송되는 값, 일반적으로 약속된 값을 넣는다

            <ul>
                <li>
                    <label for="r_sb">딸기</label>
                    <input value="1" type="radio" name="fruit" id="r_sb">
                </li>
                <li>
                    <label for="r_banana">바나나</label>
                    <input value="2" type="radio" name="fruit" id="r_banana">
                </li>
                <li>    
                    <label for="r_wm">수박</label>
                    <input value="3" type="radio" name="fruit" id="r_wm">
                </li>
            </ul>

number, range, date

number는 숫자만 입력 가능, 마우스를 올리면 수치 조정 버튼도 할 수 있다

value=”http://ldh1123./m/”에는 초기에 측정된 값을 적어 둡니다.

min은 최소값, max는 최소값

range는 슬라이더 바를 만듭니다.

date는 달력이고 min은 선택할 수있는 최소 날짜, max는 최대 날짜

type=”http://ldh1123./m/”에는 date, month, week 값도 있습니다.

            <label for="number">Number</label>
            <input type="number" value="5" min="1" max="5">
            

            <label for="range">Range</label>
            <input type="range" value="3" min="1" max="5">

            
            <label for="date">date</label>
            <input type="date" min="2023-03-01" max="2023-03-07">

submit, reset, button

sumit은 서버로 보낼 수 있는 버튼을 만들고 value=”http://ldh1123./m/”는 버튼에 값을 표시합니다.

reset은 초기화 버튼을 만들고 동일한 양식 태그의 값만 지웁니다.

버튼은 가장 기본적인 버튼, value 값을 지정해야합니다.

아무 기능도 없지만 JavaScript로 기능을 추가할 수 있습니다.

            <label for="submit"></label>
            <input type="submit" value="submit">

            <label for="reset"></label>
            <input type="reset">

            <label for="button"></label>
            <input type="button" value="button">
            
            <button>버튼</button>

hidden

hidden은 label이 필요없고 관리자 모드에서도 볼 수 없으며 사용자에게 표시 할 필요가없는 값을 설정할 때 사용됩니다.

		<input type="hidden" value="hidden_1">

Github

링크