● form 태그
- 웹 페이지 내에서 사용자로부터 입력을 받을 때 사용하는 태그
- 사용자가 입력한 데이터를 다른 페이지로 전송할 때 form 태그를 사용한다.
<form action="" method="" name="">
입력 양식 태그 등
</form>
1. action
- 데이터를 전송할 페이지의 경로
- 생략 시 현재 페이지
2. method
- 데이터를 전송하는 방식
- 생략 시 get 방식
3. name
- form 태그의 이름을 설정
- 생략 시 이름 없음
● input 태그
- 입력 받기 위해 사용되는 태그
- 데이터를 지정하여 전달할 때 사용하는 태그
1. type : 입력 종류를 설정
2. name : value의 key값
3. value : 미리 설정해 놓을 값
4. placeholder : 값은 아니지만 미리 출력할 문구
5. readonly : 수정할 수 없도록 하는 설정
6. required : 필수 항목
7. maxlength : 글자 수 제한
● input 태그의 type
<input type="값">
★1. text : 텍스트 입력(작성한 텍스트가 눈으로 보임)
★2. password : 텍스트 입력(작성한 텍스트가 눈으로 안보임)
★3. radio : 여러 개 중 하나의 옵션만 선택 가능
★4. checkbox : 여러 개 중 다수의 옵션 선택 가능
★5. file : 파일 전송(첨부파일 업로드)
6. color : 색상 선택
7. email : 이메일 입력(골뱅이 포함 입력)
8. url : http://로 입력
9. tel : 핸드폰 번호 입력
10. date : 날짜 입력(브라우저 별로 캘린더의 스타일은 다를 수 있다.)
11. number, min, max, step : 숫자 입력
12. range : 일정 범위 안의 값만 입력
13. search : 검색어를 입력
★14. button, submit, reset : 버튼, 전송, 초기화
● 선택 입력 : select 태그
- 여러 개의 옵션이 드롭다운 리스트로 되어 있으며, 그 중에서 단 하나의 옵션만을 입력받을 수 있다.
<select name="KEY">
<option value="VALUE">사용자에게 보여질 값</option>
<option value="VALUE">사용자에게 보여질 값</option>
<option value="VALUE">사용자에게 보여질 값</option>
<option value="VALUE">사용자에게 보여질 값</option>
...
</select>
● 문장 입력 : textarea 요소
- 사용자로부터 여러 줄의 텍스트를 입력받을 수 있다.
<textarea cols="가로 글자 수 크기" rows="세로 글자 수 크기">실제 값</textarea>
● fieldset 요소
- 관련있는 폼 필드 세트를 표시한다.
- form 필드 세트는 form 내에서 관련 태그를 하나의 그룹으로 묶은 것을 의미한다.
● legend 요소
- fieldset 요소의 제목을 표시한다.
- 묶음에 대한 설명을 할 때 사용한다.
실습(form)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form 태그와 input 태그 속성 예제</title>
</head>
<body>
<form name="joinForm">
<p>
아이디 <input type="text" placeholder="아이디를 입력해주세요." name="userId" required>
</p>
<p>
비밀번호 <input type="password" placeholder="15자 이상, 대문자 포함" name="userPw" required>
</p>
<fieldset>
<legend>성별</legend>
<p>
<!--label 태그는 해당 항목 외에 다른 것을 클릭해도 반영될 수 있게 해준다.(radio가 아닌 텍스트를 클릭해도 반영된다.)-->
<label>
<input type="radio" name="gender" value="남"> 남자
</label>
<label>
<input type="radio" name="gender" value="여"> 여자
</label>
<label>
<input type="radio" name="gender" value="선택안함" checked> 선택안함
</label>
</p>
</fieldset>
<fieldset>
<legend>취미</legend>
<p>
<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>
<label>
기타 <input type="checkbox" name="hobby" value="기타">
</label>
<input type="text">
</p>
<p>
<!-- label 태그 밖에 있는 요소를 연결해주기 위해 for="ID"를 사용한다. -->
<label for="img">
<img src="add.png">
</label>
<!-- display: none; => 실제로 존재하지만 눈에 보이지 않게 한다. -->
<input type="file" id="img" style="display:none;">
</p>
</fieldset>
<p>
색상 <input type="color">
</p>
<p>
메일 주소 <input type="email">
</p>
<p>
웹 사이트 <input type="url">
</p>
<p>
연락처 <input type="tel">
</p>
<p>
조회 기간 <input type="date">
</p>
<p>
참여 인원 <input type="number" value="1" min="0" max="100" step="5">
</p>
<p>
단계(상, 중, 하) <input type="range" value="1" min="1" max="3">
</p>
<p>
검색 <input type="search">
</p>
<p>
학과 선택
<select name="major">
<option value="archi">건축공학과</option>
<option value="maechanic">기계공학과</option>
<option value="indust">산업공학과</option>
<option value="elec">전기전자공학과</option>
<option value="com">컴퓨터공학과</option>
</select>
</p>
<textarea rows="4" cols="50" style="resize:none; cursor:pointer">안녕하세요, 반갑습니다.</textarea>
<p>
<input type="submit" value="가입 완료">
<input type="button" value="버튼">
<input type="reset" value="초기화">
<button type="button">가입 완료</button>
</p>
</form>
</body>
</html>
'웹 개발 > HTML' 카테고리의 다른 글
| [Web_HTML] 05 (0) | 2022.04.17 |
|---|---|
| [Web_HTML] 04 (0) | 2022.04.16 |
| [Web_HTML] 03 (0) | 2022.04.15 |
| [Web_HTML] 02 (0) | 2022.04.14 |
| [Web_HTML] 01 (0) | 2022.04.13 |
