form
- 사용자 입력에 필요한 레이아웃 구성
- ex) 로그인, 회원가입, 카드번호 등 - 속성
action: 데이터를 주고받는 경로 입력method: 데이터를 주고받는 방식 입력
-> 개발자가 입력하는 것이므로,퍼블리셔는 빈 속성만입력
- 내부태그
<fieldset>= 그룹핑, 테두리가 만들어진다.<legend>= 그룹의 제목
<body>
<form action="" method="">
<fieldset>
<legend> 제목 </legend>
--- 코드 입력 ---
</fieldset>
</form>
</body>input
-
사용자 입력이 실제로 이루어지는 곳
-
보통
<form>태그 안에서 쓰여진다. -
type=""
-
text= 한줄 입력상자 (아이디, 이름)- readonly : 읽기전용
- disabled : 비활성화
- maxlength = "글자수"
- value = "입력하세요"
-
password= 비밀번호 입력상자 (비밀번호, 주민등록번호 뒷자리)- 위의 속성 동일하게 사용 가능
-
radio= 단일 선택상자 (성별, 동의/동의안함)- name = "그룹네임" (name이 같은 것 중 하나만 선택가능)
-
checkbox= 다중 선택상자 -
file= 첨부파일 상자 -
image= 이미지 첨부 -
submit= 전송버튼 (보통 a를 많이 대체해서 쓴다.) -
reset= 초기화, 취소 버튼 (a로 대체) -
button=<button>태그와 같이 어디서든 쓰일 수 있는 범용버튼 -
hidden= 사용자에게 보이지 않는 입력폼 (데이터 전송이 목적이므로, 개발자가 사용한다.)
-
👇 이 외, 날짜 및 시간 등 유용한 type은 코드로 확인 !
<body>
<form action="" method="">
<fieldset>
<legend> 제목 </legend>
<input type="text" maxlength="8" value="아이디를 입력하세요.">
<input type="password">
<input type="radio" name="sex">남자
<input type="radio" name="sex">여자
<input type="checkbox"> 1
<input type="checkbox"> 2
<input type="checkbox"> 3
<input type="file">
<input type="image" src="/images/image1.png" alt="대체텍스트">
<input type="submit" value="파일전송">
<input type="reset" value="취소">
<input type="button" value="일반버튼">
<input type="hidden">
<input type="date">
<input type="datetime-local">
<input type="month">
<input type="time">
<input type="email">
<!-- 모바일 : 이메일 키보드 생성 -->
<input type="number">
<!-- 모바일 : 숫자 키보드 생성 -->
<input type="search">
<!-- 안드로이드 : 돋보기 , IOS : return 버튼생성 -->
<input type="tell">
<!-- 전화번호 키패드 호출 -->
<input type="url">
<!-- www.(안드로이드) / .com 키패드 제공 -->
</fieldset>
</form>
</body>textarea
- 다중 편집창
- 속성 : 실제 보이는 상자 사이즈 지정, 사용자는 그 이상 입력 가능
-rows=""= 엔터 수
-cols=""= 글자 수 (정확하지 않음)- 보통 css에서 크기를 지정하는데, 이 속성이 없으면
웹표준에 부합하지 않기 때문에빈 속성으로 넣어둔다.
- 보통 css에서 크기를 지정하는데, 이 속성이 없으면
<body>
<form action="" method="">
<fieldset>
<legend> 제목 </legend>
<textarea rows="" cols="">직접 입력하세요.</textarea>
</fieldset>
</form>
</body>select
- 목록 선택상자
- 속성
-multiple= 여러개 선택 가능 - 내부태그
optgroup= 그룹핑option= 선택목록
<body>
<form action="" method="">
<fieldset>
<legend> 제목 </legend>
<select multiple>
<optgroup label="서울">
<option>강서</option>
<option>강북</option>
<option>강남</option>
</optgroup>
<optgroup label="경기도">
<option>부천</option>
<option>인천</option>
<option>광주</option>
</optgroup>
</select>
</fieldset>
</form>
</body>label / 명시적레이블
1. <input type="radio"> 와 함께 쓰일 때 !
- 현재 선택이 무엇을 가리키는지 지정해줌으로써 텍스트를 클릭해도 선택이 가능해지도록 한다.
- input 태그의
id와 label 태그의for속성 내용을 동일하게 작성하여 서로 연결해준다.
<body>
<form action="" method="">
<fieldset>
<legend> 제목 </legend>
<input type="radio" name="sex" id="man"><label for="man">남자</label>
<input type="radio" name="sex" id="woman"><label for="woman">여자</label>
</fieldset>
</form>
</body>2. select와 연결할 때 !
- id 와 for 속성값을 동일하게 입력하여 서로 연결해준다.
- 두번째, 세번째 자리 입력은 title을 사용하여 명시해준다. (커서를 올리면 텍스트가 보임)
<body>
<form action="" method="">
<fieldset>
<legend> 제목 </legend>
<label for="phone">핸드폰번호</label>
<select id="phone">
<option>010</option>
<option>016</option>
<option>017</option>
</select>
-
<input type="text" title="핸드폰 두번째자리">
-
<input type="text" title="핸드폰 세번째자리">
</fieldset>
</form>
</body>
가치와 의미를 쫓는 개발자 되기✨