[HTML] form 태그(★★★★★)
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인 경우에만 허용
- scr : 이미지의 url 설정 ==> type 속성 값이 image인 경우에만 허용
- alt : 이미지의 대체 텍스트 설정 ==> type 속성 값이 image일 경우만 허용
- type : 입력 받을 데이터의 종류를 설정 ==> 아래에 type에 대한 내용 기재.
- value : 양식의 초기값 설정
* 데이터의 종류(type)의 값(vaule)
형식) input type = "데이터의 종류"
- button : 일반 버튼 . - onclick이라는 속성은 자바 스크립트 함수 호출 시 사용
- checkbox : 체크박스 - 여러 개 중 동시에 다중 선택, 비선택도 가능 => 배열로 값이 전달
- color : 색상 선택
- date : 날짜 선택
- email : 이메일 선택
- file : 파일 선택
- hidden : 보이지 않지만 전송할 데이터 설정 ==> 양식에는 보이지 않지만 값이 전달되는 방식
- image : 이미지 버튼 제출
- number : 숫자 선택
- password : 비밀번호 입력 가능 ==> 입력된 내용이 안 보이는 형식
- radio : 라디오 버튼 ==> 여러 개 중 하나만 선택
- range : 범위 컨트롤 지정
max, min, step, value(기본값) 속성 사용 가능
- reset : 초기화 하는 버튼 ==> 해당 form 태그 범위 내에 내의 모든 양식 값이 초기화됨
- search : 검색 기능
- submit : 제출 버튼 기능 ==> form 태그 속성 중 action 페이지로 해당 값들을 전송
- tel :전화번호 입력 기능 ==> form 태그 속성 중 action 페이지로 해당 값들을 전송
- text : 일반 텍스트 입력 기능
- time : 시간 입력 기능 ==> IE 지원 안됨
- url : 실내 url 입력 기능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="center">
<h2>회원 로그인 화면</h2>
<h3>아이디와 비밀번호를 입력하세요</h3>
<form>
<table border="1" cellspacing="0">
<tr>
<th>아이디</th>
<td>
<!-- autofocus : 힌트 제공 -->
<input type="text" autofocus
placeholder="아이디는 4자 이상 16자 미만">
<input type="button" value="중복확인">
</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>
비밀번호 같은 경우 입력하면 * 처리가 된다.
취소 버튼을 누르면 모든 입력값이 초기화 된다.