프론트엔드 학습/HTML
9. form, fieldset, label, input 입력
DvdHan
2023. 7. 3. 15:47
[사용자 입력 태그]
| 태그 | 설명 | 속성 |
| <form> </form> | 정보를 제출하기 위한 태그들을 포함 | autocomplete 속성 : 인풋칸의 자동완성 여부 (기본:on) 최근 검색 기록 나오느냐, 아니냐 결정 <form action="서버파일" method="get"> button type : submit일 경우 서버 파일로 데이터 전달됨. |
| <fieldset> | <form> 태그 안 input 요소와 label들을 그룹화 하기 |
disabled 속성 : 포함된 입력요소 비활성화 |
| <fieldset form="classForm" disabled |
fieldset 비활성화 | |
| <legend> </legend> | fieldset 요소의 제목 또는 설명 | |
| <label> </label> | 인풋 요소마다의 라벨 | for = "input의 id" <label for="A" <input id="A" 연결 |
| <input> | 입력을 받는 요소 | |
| <input 속성들> |
||
| id | 식별자 | |
| name | 이름 | HTML로는 의미가 없고, 정보를 서버에 보낼 때 사용 서버에서 각 항목을 받을 때 무엇에 대한 값인지 구별하는 용도 type = "radio"의 그룹화 기준 |
| type | 입력 값의 타입 | : text (글자 입력), : password (비밀번호 입력), : search (적는칸에 지울 수 있도록 x 표식됨), : tel (앱에서는 입력란에 번호 입력란이 뜸) : number (숫자만 입력하도록) : range (범위 설정) : date (달력이 나와서 날짜 설정) date의 min, max 에서는 yyyy-mm-dd 단위로 작성해야함 : checkbox (체크 박스) : radio (N개 선택지 중 1개만 가능한 체크박스) 각 선택지 마다 <input>을 생성하고 name으로 그룹화함. : file (파일 첨부 형식) : hidden (함께 전송될 것이지만, 서버에게만 전송할 항목) : email (기본적으로 text와 비슷하지만, 이메일 형태(@) 만 전송되도록 제한을 걸어둠.) |
| checked | 체크박스 선택됨 유지 | |
| min | 입력 최소값 | <input type =""> nummber, range, date의 범위 설정 |
| max | 입력 최대값 | <input type =""> nummber, range, date의 범위 설정 |
| step | range의 간격 단위 | <input type ="range">의 범위 설정 |
| placeholder | 입력값 없을 때 빈칸에 표시되는 문구 | |
| maxlength | placeholder가 있는 input type의 허용되는 최대 길이 |
허용되는 최대 길이, 초과시 삭제됨 |
| minlength | placeholder가 있는 input type의 허용되는 최소 길이 |
허용되는 최소 길이, 위반시, submit 거부됨 |
| value | <input>에 기본적으로 입력되는 값 | 기본적 (Default) 으로 입력되는 값 |
| autofocus | 자동으로 입력할 수 있도록 설정 | <input autofocus> 형식으로 자동으로 입력할 수 있도록 됨 |
| readonly | 유저가 수정 불가, 서버 전송 O. | |
| disabled | 유저가 수정 불가, 서버 전송 X. | <input disabled> 품절 란에 사용할 수 있음. |
| required | 필수 입력. | <input required> 반드시 입력해야하는 란. |
| accept | type ="file" 에서 받는 파일 형식 | accept ="image/png, image/jpeg" 형식으로 첨부파일의 허용되는 파일 타입 명시 |
| multiple | typpe ="file"을 여러개 첨부 가능 | 파일들의 개수를 복수개로 허용하는 키워드 |
| <button> </button> | 버튼 | type = "" 속성에 submit(제출), reset(초기화), button(기본 동작 없음) => JS로 추가 기능을 생성할 때 사용 |
예시 #1. - fieldset, legend,
[VS Code]
<form>
<fieldset>
<legend>반장</legend>
<label for="name_1">이름</label>
<input
id="name_1"
name="name_1"
type="text"
placeholder ="8자 이하"
maxlength ="8">
<br><br>
<label for="age_1">나이</label>
<input id="age_1" name="age_1" type="number">
</fieldset>
<br>
<fieldset>
<legend>부반장</legend>
<label for="name_2">이름</label>
<input
id="name_2"
name="name_2"
type="text"
placeholder="8자 이하"
maxlength="8">
<br><br>
<label for="age_2">나이</label>
<input id="age_2" name="age_2" type="number">
</fieldset>
<br>
<fieldset form="classForm" disabled>
<legend>서기</legend>
<label for="name_3">이름</label>
<input id="name_3" name="name_3" type="text">
<br><br>
<label for="age_3">나이</label>
<input id="age_3" name="age_3" type="number">
</fieldset>
<br><br>
<button type="submit">제출</button>
<button type="reset">초기화</button>
</form>[웹 페이지 결과]
예시 #2. - placeholder, maxlength -
[VS Code]
<body>
<form action="#">
<label for ="txtIp">text</label> <br>
<input
id ="txtIp"
type="text"
placeholder="5자 이하"
maxlength="5"
> <br><br>
<label for = "pwdIp">password</label> <br>
<input
id ="pwdIp"
type="password"
placeholder="8자 이하"
maxlength="8"
> <br><br>
<button type="submit">제출</button>
<button type="reset">초기화</button>
</form>
</body>[웹 페이지 결과]
예시 #3. - number, range, date -
[VS Code]
<body>
<h1>숫자 관련 인풋 타입</h1>
<form action="#">
<label for="numIp">number</label> <br>
<input
id="numIp"
type="number"
min="0"
max="10"
>
<br><br>
<label for="rgIp">range</label> <br>
<input
id="rgIp"
type="range"
min="0"
max="100"
step="20"
>
<br><br>
<label for="dtIp">date</label> <br>
<input
id="dtIp"
type="date"
min="2020-01-01"
max="2030-12-31"
>
<br><br>
</form>
</body>[웹 페이지 결과]
예시 #4. checkbox, radio
[VS Code]
<body>
<h1>체크 관련 인풋 타입</h1>
<form action="#">
<h2>checkbox</h2>
<input
id="cbIp"
type="checkbox"
checked
>
<label for="cbIp">유기농</label> <br>
<h2>radio</h2>
<input
type="radio"
name="fruit"
id="f_apple"
value="apple"
checked
>
<label for="f_apple">사과</label>
<input
type="radio"
name="fruit"
id="f_grape"
value="grape"
>
<label for="f_grape">포도</label>
<input
type="radio"
name="fruit"
id="f_orange"
value="orange"
>
<label for="f_orange">오렌지</label>
<br>
<input
type="radio"
name="vege"
id="v_carrot"
value="carrot"
checked
>
<label for="v_carrot">당근</label>
<input
type="radio"
name="vege"
id="v_tomato"
value="tomato"
>
<label for="v_tomato">토마토</label>
<input
type="radio"
name="vege"
id="v_eggplant"
value="eggplant"
>
<label for="v_eggplant">가지</label>
</form>
</body>[웹 페이지 결과]
예시 #5. 파일 첨부
[VS Code]
<body>
<h1>기타 인풋 타입</h1>
<form action="#">
<label for="fileIp">file</label> <br>
<input
id="fileIp"
type="file"
accept="image/png, image/jpeg"
multiple
>
<br><br>
<label for="hdnIp">hidden</label> <br>
<input
id="hdnIp"
type="hidden"
>
</form>
<br><hr><br>
<form action="#">
<label for="emlIp">email</label> <br>
<input
id="emlIp"
type="email"
>
<br><br>
<button type="submit">제출</button>
</form>
</body>[웹 페이지 결과]
예시 #6. 회원가입 페이지
[VS Code]
<body>
<h1>회원 가입 하기</h1>
<br>
<label for="member_name">이름</label> <br>
<input
id ="member_name"
type="text"
placeholder="이름을 입력해 주세요"
>
<br><br>
<label>성별</label> <br>
<label for="men">남성</label>
<input
id="men"
name="gender"
type="radio"
checked
>
<label for="women">여성</label>
<input
id="women"
name="gender"
type="radio"
>
<br><br>
<label for="">닉네임</label> <br>
<input
id="member_nickname"
type="text"
placeholder="닉네임을 입력해주세요"
>
<br><br>
<label for="member_email">이메일</label> <br>
<input
id="member_email"
type="email"
placeholder="이메일을 입력해주세요"
>
<br><br>
<label for=""> 전화번호 </label> <br>
<input
id="member_phone"
type="tel"
placeholder="휴대폰 번호를 입력해주세요"
>
<br><br>
<label for="member_password">비밀번호</label> <br>
<input
id="member_password"
type="password"
placeholder="비밀번호를 입력해주세요"
>
<br><br>
<label for="member_birthday">생년월일</label> <br>
<input
id="member_birthday"
type="date"
value="회원 생년월일"
>
<br><br>
<label for="member_picture">프로필 사진 첨부하기</label> <br>
<input
id="member_picture"
type="file"
value="회원 프로필 사진"
>
<br><br><br>
<button type="submit">가입하기</button>
<button type="reset">다시 입력하기</button>
</body>[웹 페이지 출력]
