티스토리 뷰
▷ 입력 태그 정리 ◁
<form> : 입력 양식을 생성하는 태그, 입력 태그의 상위에 사용
· action 속성 <form action="주소"> : 입력한 데이터를 받아서 처리하는 스크립트의 주소
action="URL" : 입력한 데이터를 받아서 처리하는 스크립트의 주소의 URL 입력
· method 속성 <form method="방식"> : 서버 컴퓨터로 데이터를 전달하는 방식을 정함
method="get" : 입력한 데이터를 URL에 포함(파라미터)시켜서 전송하는 방식
글자 수 제한(2048자), 보안 유지 안 됨
method="post" : 입력한 데이터를 HTTP Request 헤더에 포함시켜서 전송하는 방식
글자 수 제한 없음, 보안 유지 가능
새로고침이나 뒤로가기 시, 경고 표시
· enctype 속성 <form enctype="속성"> : 지정하지 않으면 경로 명만 전송 됨.
enctype="multipart/form-data" : 파일 전송
<input> : 입력 태그, 단일 태그
· type 속성 <input type="유형"> : 다양한 입력 양식을 정하는 속성
· checked 속성 <input checked> : radio나 checkbox와 같은 유형에서 초기 값 지정
· accept 속성 <input accept="파일 형식"> : file 태그에서 업로드할 수 있는 파일 형식 지정
ex1) accept="image/*" : 이미지 모든 형식 업로드 가능
ex2) accept="image/jpg" : 이미지 중 jpg 형식 업로드 가능
ex3) accept="video/mp4" : 비디오 중 mp4 형식 업로드 가능
· onclick 속성 <input onclick="자바스크립트"> : 버튼이 클릭되면 실행되는 자바스크립트를 지정
ex1) onclick="alert('안녕하세요')" : '안녕하세요'가 쓰여있는 경고 창 표시
ex2) onclick="window.open()" : 새 탭 열기
· max, min, step 속성 : number, range 속성에서 각각 최댓값, 최솟값, 단계값을 지정
· value 속성 <input value="값"> : 요소의 값 또는 버튼 이름 등을 지정
· name 속성 <input name="이름"> : 서버로 전달되는 이름
· size 속성 <input size="값"> : 입력 칸의 크기 조정
type="text" : 텍스트 입력
type="password" : 비밀번호 입력
type="radio" : 여러 항목 중에 한 가지만 선택 가능. 관련 속성 : checked
* name과 value 속성을 반드시 지정해주어야 함.
* name 속성 값이 같아야 동일한 그룹으로 취급 됨. → name 속성 값이 다르면 중복 선택이 됨.
type="checkbox" : 여러 항목 중에 두 가지 이상 선택 가능. 관련 속성 : checked
* name과 value 속성을 반드시 지정해주어야 함.
* name 속성 값이 같아야 동일한 그룹으로 취급 됨.
type="submit" : 제출, 입력한 데이터를 서버로 전송
type="reset" : 초기화, 입력한 값 모두 초기화
type="file" : 파일 업로드 버튼. 관련 속성 : accept
type="hidden" : 사용자가 입력하지 않고, 서버에 무언가를 전달하고 싶은 경우
ex) 사용자의 아이피 등
type="button" : 일반 버튼, onclick 등의 속성을 사용하여 자바스크립트로 연결 가능. 관련 속성 : onclick
type="image" : 이미지 버튼, 제출 역할만 가능
type="search" : 검색 박스, 박스 오른쪽에 X 기호
type="email" : 이메일 주소 입력
type="number" : 숫자 입력, value 값은 초기 값. 관련 속성 : min, max, step
type="range" : 슬라이드 막대로 숫자 지정, value 값은 초기 값. 관련 속성 : min, max, step
type="date" : 연도, 월, 일 입력
type="datetime-local" : 날짜와 시간 입력, 지역 표준 시간대
type="month" : 연도, 월 입력
type="week" : 연도, 주 입력
type="time" : 시간 입력
type="color" : 색상 입력
· id 속성 <input id="이름"> : label 태그와 연결
· autofocus 속성 <input autofocus> : 입력 커서 자동 맞춤
· placeholder 속성 <input placeholder="할 말"> : 텍스트 박스에 연한 회색 글씨로 힌트를 보여줌
· readonly 속성 <input readonly> : 읽기 전용
· required 속성 <input required> : 제출 버튼을 눌렀을 때 유효한 텍스트인지 검사 가능
ex1) type : email에서 이메일 주소를 입력하였는지?
ex2) type : text에 텍스트를 입력하였는지?
Ex> 입력 받기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <form enctype="multipart/form-data"> 성별 : <input type="radio" name="gender" value="male"> 남성 <input type="radio" name="gender" value="female"> 여성 <!--남성, 여성 중 한 가지만 선택 가능--> <br> 혈액형 : <input type="radio" name="blood" value="A"> A형 <input type="radio" name="blood" value="B" checked> B형 <input type="radio" name="blood" value="O"> O형 <input type="radio" name="blood" value="AB"> AB형 <!--여러 혈액형 중 한 가지만 선택 가능, B에 체크되어 있음--> <br> 좋아하는 과일 : <input type="checkbox" name="fruit" value="apple" checked> 사과 <input type="checkbox" name="fruit" value="pear"> 배 <input type="checkbox" name="fruit" value="watermelon"> 수박 <input type="checkbox" name="fruit" value="green_grape"> 청포도 <input type="checkbox" name="fruit" value="banana"> 바나나' <!--여러 과일 중 여러 가지 선택 가능--> <br> 파일 : <input type="file" accept="image/*"> <!--이미지 업로드--> <br><br> <input type="button" value="선택" onclick="alert('선택하셨습니다 ㅎ')"> <input type="button" value="새 탭 열기" onclick="window.open()"> <!--onclick 속성을 사용하여 원하는 기능 지정--> <br> <br><hr><br> <input type="submit" value="제출"> <input type="reset" value="초기화"> <!--같은 Form 태그 안의 입력한 값이 모두 제출되거나 초기화 됨--> </form> | cs |
<button> : 버튼 태그, 버튼 안에 텍스트나 이미지와 같은 컨텐츠를 넣을 수 있음.
· type 속성 <button type="유형"> : 버튼의 기능 정하기
type="submit" (기본 값) : 제출. 입력한 데이터를 서버로 전송
type="reset" : 초기화, 입력한 값 모두 초기화
type="button" : onclick 속성 등을 사용하여 다양한 기능 사용 가능
Ex> 버튼 태그 사용하기
1 | <button type="reset"><img src="poster.png" alt="POSTER" width="200px"> 이것은 버튼</button> | cs |
<textarea> : 입력 태그, 여러 줄의 텍스트를 입력받을 때 사용
· rows 속성 <textarea rows="값"> : 가로 크기 설정
· cols 속성 <textarea cols="값"> : 세로 크기 설정
* textarea 태그 안에 입력한 값은 텍스트 박스에 기본 값으로 입력되어 있음.
Ex> 여러 줄의 텍스트 입력하기
1 2 3 4 5 | <form> 고객의 의견<br> <textarea name="feedback" cols="30" rows="10">기본 값 ㅎ</textarea> <input type="reset"> </form> | cs |
<select> : 클릭 시 드롭 다운 리스트 나옴, 선택 가능
· name 속성 <select name="이름"> : 서버에 전송 될 이름
<option> : select 태그에서 각 요소를 지정
· value 속성 <option value="이름"> : 요소의 이름 지정
· selected 속성 <option selected> : 초기 값 지정
Ex> 선택 목록
1 2 3 4 5 6 | <select name="dinner"> <option value="pizza">피자</option> <option value="chicken">치킨</option> <option value="sushi" selected>초밥</option> <option value="meat">고기</option> </select> | cs |
<fieldset> : 구역 설정 태그, 하나의 폼 안에 여러 구역을 나누어 표시할 때 사용
<legend> : 구역 제목 지정 태그
Ex> 구역 설정하기
1 2 3 4 5 6 7 | <form> <fieldset> <legend>인적사항 입력</legend> 이름 : <input type="text" name="name"><br> 나이 : <input type="text" name="old" size="3px"><br> </fieldset> </form> | cs |
<label> : 폼 요소를 위한 레이블을 정의하는 태그
· for 속성 <label for="이름"> : input 요소와 label 텍스트 연결하는 역할
Ex> 입력 태그 사용하기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | <!-- label 사용 방법 1 : for, id 속성을 이용 --> <label for="number">학번 : </label> <input type="text" id="number"> <!-- label 사용 방법 2 : label 태그 안에 텍스트와 input 태그 사용 --> <label>학번 : <input type="text"></label> <br><hr><br> <form action="get"> <fieldset> <legend>로그인 정보</legend> <label for="input_id">아이디 : </label> <input type="text" name="id" id="input_id" required placeholder="아이디를 입력하세요"> <br> <label for="input_pw">비밀번호 :</label> <input type="text" name="password" id="input_pw" placeholder="비밀번호를 입력하세요"> </fieldset> <fieldset> <legend>개인정보</legend> <label>이름 : <input type="text" name="name"></label><br> <label>학번 : <input type="text" name="studentnumber"></label><br> <label> 학과 : <select name="division"> <option value="information">정보보호과</option> <option value="software">소프트웨어과</option> <option value="techno">테크노경영과</option> <option value="multimedia">멀티미디어과</option> </select> </label> <br> <label> 자기소개<br> <textarea name="introduce" cols="80" rows="3"></textarea> </label> </fieldset> <input type="submit" value="submit"> </form> <br><hr><br> <form> <label>검색 : <input type="search"></label> <input type="submit"> </form> <br><hr><br> <form> <label>이메일 : <input type="email" required></label> <input type="submit" value="submit"> </form> <br><hr><br> <form> <label>발 사이즈 : <input type="number" max="300" min="210" step="5"></label> <br> <label>소리 음량 : <input type="range" max="100" min="0" step="2"></label> </form> <br><hr><br> <form> <label>DATE : <input type="date"></label><br> <label>DATETIME-LOCAL : <input type="datetime-local"></label><br> <label>MONTH : <input type="month"></label><br> <label>WEEK : <input type="week"></label><br> <label>TIME : <input type="time"></label> </form> <br><hr><br> <form> <label>COLOR : <input type="color" name="color"></label> </form> | cs |