오봉이와 함께하는 개발 블로그
입력 양식 태그 본문
728x90
FrontEnd_day1 정리 (2021.12.02 목요일)
입력 양식 태그
입력 양식(form)을 만들 때 사용하는 태그
모든 입력 태그에서
- name 속성 : 서버에 전달될 때 서버에서 인식하는 이름
- id 속성 : 자바스크립트, jQuery에서 객체로 선택해 올 때 인식하는 이름
<form>
- 입력 양식을 구성하는 기본 골격 제공
- <form method=”post” action=”newMember.jsp”>
다양한 입력 양식 태그 포함
<input type=”text” name=”id”>
</form>
<label>
- 폼 요소에 캡션(라벨) 붙이기
- <label></label>
<input>
데이터를 입력 받기 위한 태그
<input type="text" id="id" name="id">
속성
- name : 입력상자의 이름(속성값 : 문자열)
- type : 입력 유형(속성값 : text, password, checkbox, radio)
- size : 입력 상자의 크기(속성값 : 숫자)
- value : 초기값/태그가 지닌 값(속성값 : 문자열)
- maxlength : 최대 길이(속성값 : 숫자)
- placeholder : 입력할 내용의 힌트 표시(속성값 : 문자열)
- readonly : 읽기 전용 필드
- autocomplete : 자동 완성 기능 제어(속성값:on/off)
- required : 필수 필드 지정
- autofocus : 입력 커서 표시
- hidden : 숨김(사용자에게는 보이지 않지만, 서버로 넘겨지는 값을 갖는 필드)
type 속성에서 사용 가능한 유형
- <input type="submit" value="회원가입">
- 입력된 값들을 서버로 전송하게 하는 submit이벤트 발생
- text : 한 줄의 텍스트 입력
- password : 비밀번호 입력
- checkbox : 체크박스 (여러 개 선택 가능)
- radio : 라디오버튼(1개만 선택 가능)
- button : 버튼
- file : 파일을 첨부할 수 있는 버튼
- image : submit 버튼 대신 사용할 이미지 삽입
- submit : 서버 전송 버튼
- reset : 리셋 버튼
라디오 버튼 (radio)
- 여러 항목 중에 한 개를 선택할 때 사용
- <input type=”radio” name=”year” value=”1”>1학년
- <input type=”radio” name=”year” value=”4” checked>4학년
- name : 그룹 이름
- value : 선택한 버튼의 값 (서버로 전송되는 값)
- checked : 처음부터 선택된 상태로 만들기
체크박스(checkbox)
- 여러 항목 중에 여러 개를 선택할 때 사용
- <input type=”checkbox” name=”hobby” value=”게임” checked>게임
- <input type=”checkbox” name=”hobby” value=”영화”>영화
- name 속성을 동일하게 사용해도 되고 다른 이름이도 해도 됨
- 일반적으로 동일으로 하고 전송 받을 때 배열로 처리 (선택한 개수 만큼의 값이 전달하고, 개수 크기의 배열로 생성)
<select> <option>
- 드롭다운 목록 표시
<select name="nation">
<option value="미국">미국</option>
<option value="중국">중국</option>
<option value="호주" selected”>호주</option>
</select>- <textarea>
- 여러 라인 입력
- rows : 텍스트 영역의 세로 길이
- cols : 텍스트 영역의 가로 길이
- <textarea rows="10" cols="50" name="content"></textarea>
- 여러 라인 입력
입력 양식 태그 예
- form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>입력 양식 태그</title>
</head>
<body>
<form method="post" action="newMember.jsp">
label 태그 사용하지 않음<p>
성명 <input type="text" id="name" name="name" size="10" autofocus><br>
hidden 태그
<input type="text" id="prdNo" hidden>
<hr>
힌트 출력<p>
<input type="text" name="id" size="10" placeholder="아이디"><br>
<hr>
label 태그 사용 <p>
<label>성명 <input type="text" name="name" size="10" placeholder="아이디"></label><br><br>
<label>성명 <input type="text" name="name" size="10" placeholder="아이디"></label><br><br>
<label>우편번호 <input type="text" name="zipcode" value="12345" readonly></label><br><br>
<label>주소 <input type="text" name="address" required></label><br><br>
<label>비밀번호 <input type="password" name="passwd"size="10" ></label><br><br>
<hr>
학년
<label><input type="radio" value=”1” >1학년</label>
<label><input type="radio" value=”2” >2학년</label>
<label><input type= "radio" value=”3” >3학년</label>
<label><input type="radio" name=”year” value=”4” checked>4학년</label><br><br>
<hr>
차이점? label 태그로 텍스트까지 감싸주면 클릭 영역이 텍스트까지 확장 (클릭 영역을 넓힐 수 있음)<br>
<input type="radio" value=”1” >1학년<br>
<label><input type="radio" value=”1” >1학년</label><br><br>
<label><input type="checkbox" name=”hobby” value=”게임” checked>게임</label>
<label><input type="checkbox" name=”hobby” value=”영화”>영화</label>
<label><input type="checkbox" name=”hobby” value=”독서”>독서</label>
<label><input type="checkbox" name=”hobby” value=”운동”>운동</label><br><br>
여행하고 싶은 나라 :
<select name="nation">
<option value="미국">미국</option>
<option value="중국">중국</option>
<option value="호주" selected>호주</option>
</select><br><br>
자기 소개 : <br>
<textarea rows="10" cols="50" name="content"></textarea><br><br>
첨부 파일 선택 : <input type="file" size="30"><br><br>
<input type="button" value="아이디 중복 확인"><br><br>
<input type="image" id="cartImg" src="image/cart.jpg"><br><br>
<input type="email"><br><br>
<input type="submit" value="회원가입"> <input type="reset" value="취소">
</form>
</body>
</html>728x90
'FE/HTML' Related Articles
more
Comments