웹 페이지에서 클라이언트에게 입력값을 받을 입력폼을 생성하는 태그를 배우다.
<!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>Document</title>
</head>
<body>
<!-- form 태그: 웹페이지에서 입력폼을 만들 때 사용하는 태그
사용자에게 정보를 받아주는 태그
- 필수 속성: method(전달 방식), action(전달 위치)
#: 현재 위치 -->
<form action="#" method="get">
<!-- input 태그: 사용자가 입력할 수 있도록 한 공간
*속성*
1) name: 입력한 값을 구분하기 위해서 이름을 지정함.
2) placeholder: 미리보기 텍스트
3) autofocus: 자동 커서 설정
4) value: 기본값 설정
5) readonly: 읽기 전용 지정, 수정 금지
6) maxlength: 최대 글자 수 제한 -->
<h3>입력</h3>
ID <input type="text" name="id" placeholder="아이디"
autofocus> <br>
PW <input type="password" placeholder="비밀번호" maxlength="12"> <br>
소속 <input type="text" name="lec"
value="인공지능사관학교" readonly>
<h3>선택</h3>
<!-- 1. input 태그, type 속성이 checkbox
2. input 태그, type 속성이 radio
3. select 태그 -->
<!-- checkbox와 radio 비교
- 필수 속성이 2가지 존재
- name: 어떤 설문인지?
- value: 어떤 값인지? -->
<!-- (1) checkbox: 중복 선택이 가능하다 -->
<p>좋아하는 메뉴를 골라주세요.</p>
마라탕 <input type="checkbox" name="menu" value="mara"/>
마제소바 <input type="checkbox" name="menu" value="maje"/>
<!-- (2) radio: 중복 선택이 불가능하다
name을 사용해서 같은 주제로 묶어준다. -->
<hr>
<p>성별을 골라주세요.</p>
남성 <input type="radio" name="gender" value="man"/>
여성 <input type="radio" name="gender" value="woman"/>
<hr/>
<!-- (3) select 태그:
- option 태그가 필요하다 -->
<input type="text"/>
<select name="" id="">
<option value="">@gmail.com</option>
<option value="">naver.com</option>
<option value="">daum.net</option>
</select>
<h3>그 외</h3>
<input type="file"> <br>
<input type="color"> <br>
<input type="number"> <br>
<input type="range"> <br>
<input type="date"> <br>
<input type="datetime-local">
<h3>제출 및 초기화</h3>
<!-- 제출 및 초기화된 정보는 무조건 form태그의 시작 ~ 끝
제출 및 초기화하는 버튼의 위치는 무조건 form태그 안 쪽-->
<input type="submit">
<input type="reset">
</form>
</body>
</html>
비밀번호 입력에서 ***로 표시되게 type의 속성값을 password로 한다.
소속의 readonly 속성은 클라이언트가 수정할 수 없게 만드는 것이다.
form 안에 input 태그를 사용하여 input 태그의 typle 태그 속성값을 바꿔가며 입력받는 방식을 바꾼다.
checkbox 속성값은 클라이언트가 여러 값을 선택할 수 있다.
radio 속성값은 클라이언트에게 2개 이상의 선택지를 주지만 1가지만 선택할 수 있다. ex) 성별
radio 속성값을 사용할 때 주의사항은
input의 name 속성을 같게 하여 같은 설문으로 묶어서 1가지만 선택할 수 있게 만들어야 한다.
이메일 주소를 적는 칸에 주로 사용되는 select 태그는 속성값이 아니고 따로 태그를 만들어서 그 안에 option 태그들을 사용해야 한다.
'Front-End > HTML' 카테고리의 다른 글
| [HTML] Ex09_목록 태그.html (0) | 2023.06.10 |
|---|---|
| [HTML] Ex08_회원가입 실습.html (0) | 2023.06.10 |
| [HTML] Ex06_테이블.html (0) | 2023.06.10 |
| [HTML] Ex05_앵커태그.html (0) | 2023.06.10 |
| [HTML] Ex04_이미지태그.html (0) | 2023.06.10 |
