입력태그(form)
basic.html
<!DOCTYPE html>
<html lang="ko">
<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>입력태그(form)</title>
<style>
textarea{
resize: none;
width: 500px;
height: 300px;
/*textarea는 사이즈를 조절할 수 있는 커서가 존재.
레이아웃을 방해할 요인이 있기 때문에 사이즈는 직접 설정하고
사용자가 resize를 하지 못하도록 사용하지 않음으로 설정해야 함.
*/
}
</style>
</head>
<body>
<!--
form 요소
사용자 입력을 위한 다양한 방식의 입력 폼을 제공하는
태그로 지정된 서버에 입력된 값을 보내는 역할을 함.
데이터를 전송하거나 받아야 하기 때문에 항상
form태그로 감싸고 시작을 해야함.
form태그에 들어가는 속성
css가 아니므로 직접 입력할 것
*-action 실행 애플리케이션의 주소를 지정
입력된 값은 서버 또는 프로그램 주소.
이곳으로 데이터를 전송하려면 브라우저가 전송 위치를
알아야 하기 때문에 필수적으로 들어감.
*-method
-get : 전송되는 값을 암호화하지 않음.
암호화가 되지 않기 때문에 post에 비해 보안에 취약.
한번에 전송되는 데이터의 양이 제한적.
-post : get에 비해 보안성이 좋으며, 한번에 전송되는 데이터의 양이 상대적으로 많음.
*-name : 입력 속성 태그에 id와 class처럼 이름을 부여.
css처럼 주지는 못하며, 스크립트에서 요소를 참조할 때 사용.
-accept-charset : 문자를 인코딩하지 못하는 경우에 선언하여 사용.
novalidate : html5에서 새로 생긴 속성으로 유효성 체크 (보내려는 데이터가 정상인지 비정상인지)
유효성 체크를 하는 속성값이 없으면 유효성 체크를 함.
값이 있으면 유효성 체크를 하지 않음.
novalidate = "novalidate"처럼
속성과 속성값이 서로 같은 경우 값을 생략해도 속성이 적용.
form태그 안에 들어가는 전용태그들
fieldset = 입력요소들을 구분지어서 그루핑해주는 태그.
ex) 회원가입시 필수동의, 선택동의 구분
간단한 구조나 그룹을 나눌 필요가 없으면 생략가능.
*fieldset으로 그룹을 나눴다면 반드시 legend로 각
fieldset의 제목을 넣어줘야 함.
input
-데이터를 입력하는 가장 기본적인 태그.
type의 속성을 따라 용도나 형태를 바뀌게 됨.
type의 종류
1. text : 일반적인 텍스트를 입력할 수 있는 타입.
2. password : 텍스트를 암호화하여 출력.
3. number : 숫자만 입력 가능한텍스트 타입이며,
직접 숫자를 입력하거나 오른쪽 끝에 스피너버튼을 통해서 숫자 조절.
4. color : 컬러를 지청할 수 있는 colorpicker창이 활성화.
(ie 미지원, 파폭 미지원, 사파리 미지원)
브라우저별 지원 현황 확인 사이트
caniuse
5. date : 날짜를 선택할 수 있는 type창 달력을 클릭하면
날짜를 선택할 수 있는 창이 생성.(html5)
datetime, datetime-local은 호환되지 않음
6. email : 이메일 주소를 입력하는 입력창
이메일 주소 유효성을 체크함. (전송 시켜봐야 알아)
조건을 만족하지 않으면 경고창을 출력하며, 데이터를 전송하지 않음.
7. submit = 데이터 전송 버튼
8. reset = 작성된 내용을 초기화 하는 버튼.
9. range : 사용자가 일정 범위 안에 값을 선택할 수 있는 범위 슬라이더를 생성.
사용자가 선택할 수 있는 범위를 지정해주는 것이 포인트.
min과 max로 최소와 최대범위를 선택.
value : server에 전송되는 데이터값.
value가 생략되어 있다면 해당 영역에 생성된 텍스트가
대신 전송됨.
버튼타입에 적용할 경우 출력텍스트가 됨.
minlengt : 최소글자수(유효성검사)
maxlength : 최대글자수
size : 영역값(width나 height가 아닌 글자수에 따라 사이즈가 바뀜. 기본값은 size = "20")
width처럼 정확한 값을 파악하기 힘들기 때문에 잘 사용하지 않으며
width와 섞어서도 사용하지 않음.
required = 필수입력요소를 변환.
(유효성 검사)
disabled : 사용자가 임의대로 값을 입력하지 못하도록 lock을 걸어버리는 용도.
특정 행동 이후에 값을 자동으로 입력하는 용도로 사용.
readonly :
읽기전용으로 변환.
disabled와는 다르게 입력된 텍스트를 긁어올 수 있지만, 수정할 수는 없음.
disabled와 readonly의 가장 큰 차이점은 입력된 값을 서버로 전송시키냐 안시키냐의 차이.
disabled : 전송안보냄
readonly : 전송함
10. checkbox
중복으로 선택 가능한 체크박스 형태.
name으로 그룹을 설정함.
11. radio
체크박스의 형태로 하나의 name안에 하나의 선택만 가능.
*radio와 checkbox는 checked라는 속성으로 미리 체크해놓을수있음.
12. file = file업로드 버튼.
13. hidden = 사용자가 직접 사용할 수 없는 숨겨져 있는 입력창이 생성.
실제로 출력되는 요소가 아니기 때문에 데이터를 검토하거나 받는 용도로 사용
검색창 분류하는 것들이나 데이터를 계산하기 위한 값들을 처리하기 위해 생성함.
type 외에 사용되는 태그들
1. select
선택창을 설정할 수 있는 폼 요소.
창을 클릭하면 해당하는 리스트들이 드롭다운 되는 방식.
*multiple
기본적으로 select는 하나만 선택할 수 있지만
multiple을 사용할 경우 다중 선택할 수 있음.
size속성은 한번에 보여지는 option의 갯수를 설정.
-->
<form action = "#" accept-charset="UTF-8" method="post" name="login" novalidate>
<fieldset>
<legend>
필수 입력 요소
</legend>
<input type="text" minlengt="5" maxlength="10" placeholder="값을 입력하세요">
<input type="password" size="50" required>
<!--required : 필수 입력 칸으로 바뀌어줌. but novalidate가 선언되었기 때문에
경고창 없이 제출됨-->
<!--50글자가 들어갈 만큼의 사이즈. 정확한 width값을 파악하기 어려움-->
<input type="number" disabled>
<input type="color">
<input type="date">
<input type="email">
<input type="submit" value="히히">
<input type="reset">
<input type="range" min="5" max="10">
<input type="button" value="버튼">
<input type="text" disabled placeholder="disable">
<input type="tel" readonly placeholder="readonly">
</fieldset>
<fieldset>
<legend>
선택 입력 요소
</legend>
<input type="radio" name="number">1번<!--데이터가 넘어갈때에는 1번이라는 값이 넘어감-->
<input type="radio" name="number" value="2">2번<!--데이터가 넘어갈때에는 2라는 값이 넘어감-->
<input type="radio" name="number">3번
<input type="radio" name="number">4번
<input type="checkbox">1번
<input type="checkbox">2번
<input type="checkbox">3번
<input type="checkbox">4번
<input type="radio" name="gender" value="man">남
<input type="radio" name="gender" value="woman" checked>여
<input type="file">
<input type="hidden"><!--보이지 않는 곳에서 데이터를 분류, 정리.. -->
</fieldset>
<fieldset>
<legend>select</legend>
<select multiple size="2"><!--내가 보여줄 옵션의 개수-->
<option value = "1">선택1</option>
<option>선택2</option>
<option>선택3</option>
<option>선택4</option>
<option>선택5</option>
</select>
<select>
<optgroup>
<option>1번</option>
<option>1번</option>
</optgroup>
<optgroup>
<option>2번</option>
<option>2번</option>
</optgroup>
<optgroup>
<option>3번</option>
<option>3번</option>
</optgroup>
</select>
</fieldset>
<progress max="100" value="60"></progress>
<textarea></textarea>
<fieldset>
<label for = "text">아이디</label>
<input id = "text" type="text">
<!--서로 떨어져 있어도 연결이 됨-->
<input type="radio" id="radio">
<label for="radio">버튼</label>
<!--이름으로 서로 연결시켜준다(명시적)-->
<label>버튼<input type="radio"></label>
<!--암시적인 방법-->
</fieldset>
</form>
</body>
</html>
가보자고