2024-10-08
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
form 태그
==> 사용자에게 입력을 받을 데이터 양식을 설정하는 태그.
* input 태그 속성
- autocomplate : 사용자가 이전에 입력한 값으로
자동완성기능을 사용할 것인지 여부 설정.
==> on(default) or off
- autofocus : 페이지가 로드될 때 자동으로 포커스를 이동할지 여부 지정.
- checked : 양식이 선택되었음을 표시할지 여부 지정.
==> type 속성 값이 radio, checkbox인 경우만 사용 가능.
- disabled : 양식을 비활성화할지 여부 지정.
- max : 지정 가능한 최대값 설정.
==> type 속성 값이 number인 경우만 사용 가능.
min 속성 보다 큰 값만 허용.
- min : 지정 가능한 최소값 설정.
==> type 속성 값이 number인 경우만 사용 가능.
max 속성 보다 작은 값만 허용.
- maxlength : 입력 가능한 최대 문자 수 지정.
==> type 속성 값이 text, email,
password, tel, url인 경우만 허용.
- multiple : 둘 이상의 값을 입력할 수 있는지 여부 지정.
==> type 속성 값이 email, file인 경우면 허용 가능.
email인 경우에는 ,(콤마)로 구분.
- name : 양식의 이름을 지정.
- placeholder : 사용자가 입력할 값의 힌트 지정.
==> type 속성 값이 text, search,
tel, url, email인 경우만 허용.
- readonly : 수정 불가능한 읽기 전용 지정.
- step : 유효한 증감 숫자 간격의 지정.
==> type 속성 값이 number, range인 경우만 허용.
- src : 이미지의 url 지정.
==> type 속성 값이 image인 경우만 허용.
- alt : 이미지 대체 텍스트 지정.
==> type 속성 값이 image인 경우만 허용.
- type : 입력 받은 데이터의 종류 지정.
==> 하단에 type에 대한 내용 기재.
- value : 양식의 초기값 지정.
* 데이터의 종류(type)의 값(value)
- button : 일반 버튼.
==> onClick 속성을 이용하여
자바스크립트 함수를 호출할 때 사용함.
- checkbox : 체크 박스.
==> 여러 개 동시에 선택, 비선택 가능.
배열로 값이 전달이 됨.
- color : 색상 선택. ==> IE 지원 불가
- date : 날짜 선택. ==> IE 지원 불가
- email : 이메일 선택.
- file : 파일 선택.
- hidden : 보이지 않지만 전송할 양식 설정.
==> 양식에는 보이지 않지만 값이 전달될
때 같이 전달되는 양식.
- image : 이미지 제출 버튼.
- number : 숫자 선택 ==> IE 지원 불가
- password : 비밀번호 입력 가능.
==> 입력된 내용이 안 보이는 형식.
- radio : 라디오 버튼. 여러 개 중 하나만 선택됨.
- range : 범위 컨트롤 지정.
==> max, min, step, value(기본값) 속성 사용 가능함.
- reset : 초기화 하는 버튼.
==> 해당 form 범위 내의 모든 양식값이 초기화됨.
- search : 검색 기능 제공.
- submit : 제출 버튼 기능.
==> form 태그 속성 중 action 페이지로 해당 값들을 전송.
- tel : 전화번호 입력 가능.
- text : 일반 텍스트 입력 가능.
- url : 절대 url 입력 가능.
-->
<div align="center">
<h2>회원 로그인 화면</h2>
<h3>아이디와 비밀번호를 입력하세요.....</h3>
<table border="1">
<tr>
<th>아이디</th>
<td>
<input type="text" autofocus
placeholder="4자리 이상 16 자리 미만">
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<input type="password">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="로그인">
<input type="reset" value="다시작성">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
