* 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 입력 기능.
<form 기본 예제>
<h2>회원 로그인 화면</h2>
<h3>아이디와 비밀번호를 입력하세요....</h3>
<form action="http://www.google.com">
<table border="1" cellspacing="0">
<tr>
<th>아이디</th>
<td>
<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>
<여러가지 input type 예제>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</script>
</head>
<body>
<h3>당신의 취미는?</h3>
<input type="checkbox" name="hobby" value="운동">운동
<input type="checkbox" name="hobby" value="여행">여행
<input type="checkbox" name="hobby" value="독서">독서
<input type="checkbox" name="hobby" value="잠자기">잠자기
<input type="checkbox" name="hobby" value="숨쉬기">숨쉬기
<hr>
<h3>당신의 성별은?</h3>
<input type="radio" name="gender" value="남자">남
<input type="radio" name="gender" value="여자" checked="checked">여
<hr>
<!-- textarea 태그 : 여러 줄을 입력할 수 있는 태그.
textarea 속성
- rows : 태그에 기본적으로 설정할 줄(행)
- cols : 태그에 기본적으로 설정할 열(컬럼) -->
<h3>운영자에게 하고 싶은 말...</h3>
<textarea rows="5" cols="30">하고 싶은 말을 작성하세요...</textarea>
<hr>
<h3>파일을 선택하세요....</h3>
<input type="file">
<hr>
<h3>직업을 선택하세요....</h3>
<select>
<option value="">::: 직업 선택 :::</option>
<option value="회사원">회사원</option>
<option value="회사원">회사원</option>
<option value="공무원">공무원</option>
<option value="학생">학생</option>
<option value="주부">주부</option>
<option value="무직">무직</option>
<option value="기타">기타</option>
</select>
<hr>
<h3>색상을 선택하세요....</h3>
<input type="color">
<hr>
<h3>날짜를 선택하세요....</h3>
<input type="date">
<hr>
<h3>시간을 선택하세요....</h3>
<input type="time">
<hr>
<h3>수량을 선택하세요....</h3>
<input type="number" min="1" max="20" value="10">
<hr>
<h3>범위를 선택하세요....</h3>
<input type="range" min="1" max="20" value="10">
<hr>
<h3>오늘은 이번 달의 몇 번째 주인가요?</h3>
<input type="week">
<hr>
<!--
required : 필수 입력 내용
-->
<h3>이메일 주소를 입력하세요....</h3>
<form action="http://www.daum.net">
<input type="email" required>
<input type="submit" value="전송">
</form>
</body>
</html>
'Front > HTML' 카테고리의 다른 글
| [HTML5] semantic 태그 (0) | 2021.04.20 |
|---|---|
| [HTML5] fieldset 태그 (0) | 2021.04.20 |
| [HTML5] HTML5 기본 개념 및 참고 사이트 (0) | 2021.04.20 |
| [HTML4] iframe, frameset, frame 태그 (0) | 2021.04.20 |
| [HTML4] table 태그 (0) | 2021.04.20 |
