HTML #11 : <form> 태그 & 예제
190425
<form>태그에 대해서 알아보겠습니다.
form 요소(엘리먼트)
- 웹에서의 사용자의 입력을 받는 컨트롤을 제공하는 태그
* 사용자의 이름, 전화번호, 비밀번호, 주소 등의 값을 입력받을 수 있다.
- 폼 요소는 <form> 태그 내부에 정의된다.
<form>
폼 요소들
폼 요소들
폼 요소들
</form>
- 폼 요소
* <input />
: 이름, 전화번호, 비밀번호, 날짜, 숫자, 이메일, 체크박스, 라디오버튼을 생성할 때 사용한다.
* <select></select>
: 콤보박스를 생성할때 사용한다.
* <textarea></textarea>
: 많은 내용을 입력받을 수 있는 텍스트 박스를 생성할 때 사용한다.
* <button></button>
: 버튼을 생성할 때 사용한다.
- input 태그
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 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Form</title> </head> <body> <h1>폼요소 연습하기</h1> <h2>input 태그 연습하기</h2> <form> <label>숨김필드</label><input type="hidden"><br /> <label>이름</label><input type="text" /><br /> <label>비밀번호</label><input type="password" /><br /> <label>생일</label><input type="date" /><br /> <label>나이</label><input type="number" /><br /> <label>프로필사진</label><input type="file" /><br /> <label>성별</label> <input type="radio" />남 <input type="radio" />여<br /> <label>관심분야</label><input type="checkbox" />영화 <input type="checkbox" />미술 <input type="checkbox" />운동 <input type="checkbox" />음악 <input type="submit"> <input type="reset"> </form> </body> </html> | cs |
>>
- type 속성값에 따라서 다양한 입력 컨트롤을 생성할 수 있다.
- 주요 타입 속성
type="hidden" 사용자에게 보이지 않는 필드를 만든다.
type="text" 한 줄 입력 텍스트필드를 만든다.
type="password" 비밀번호 입력필드를 만든다.
type="date" 날짜 입력 필드를 만든다.
type="time" 시간 입력 필드를 만든다.
type="number" 숫자 입력 필드를 만든다.
type="email" 이메일 입력 필드를 만든다.
type="url" url 입력 필드를 만든다.
type="file" 파일을 첨부할 수 있는 필드를 만든다.
type="checkbox" 주어진 항목을 2개 이상 선택할 수 있는 체크박스를 만든다.
type="radio" 주어직 항목에서 하나만 선택할 수 있는 라디오 버튼을 만든다.
type="submit" 입력된 값을 서버로 제출하는 버튼을 만든다.
type="reset" 폼의 입력값을 원래 상태로 되돌리는 버튼을 만든다.
type="button" 버튼을 만든다.
다음은 속성에 대해서 알아보겠습니다.
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 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Form2</title> </head> <body> <h2>input태그의 주요 속성 연습하기</h2> <form action="register.jsp"> <label>value 속성</label> <input type="text" name="nickname" value="이름"><br /> <label>placeholder</label> <input type="text" name="username" placeholder="이름을 입력하세요"><br /> <label>maxlength 속성</label> <input type="text" name="address" maxlength="6"><br /> <label>readonly 속성</label> <input type="text" name="phone" value="010-1111-1111" readonly="readonly"><br /> <label>disabled 속성</label> <input type="text" name="school" value="서울대학교" disabled="disabled"><br /> <label>name 속성</label> <input type="text" name="userid" placeholder="아이디를 입력하세요"><br /> <label>name 속성</label> <input type="date" name="birth" placeholder="생일을 입력하세요"><br /> <label>name 속성</label> <input type="radio" name="gender" value="male" checked="checked"> 남 <input type="radio" name="gender" value="female"> 여 <br /> <label>name 속성</label> <input type="radio" name="career" value="0" checked="checked"> 신입 <input type="radio" name="career" value="3"> 3년차 이상 <input type="radio" name="career" value="5"> 5년차 이상 <input type="radio" name="career" value="7"> 7년차 이상 <br /> <label>name 속성</label> <input type="checkbox" name="tech" value="java" checked="checked">java <input type="checkbox" name="tech" value="script" checked="checked">script <input type="checkbox" name="tech" value="python">python <input type="checkbox" name="tech" value="c">c <input type="checkbox" name="tech" value="sql">SQL <input type="checkbox" name="tech" value="design">design<br /> <input type="submit"> </form> </body> </html> | cs |
- type 속성 : 입력 컨트롤의 형식을 지정한다.
- name 속성 : 입력된 값을 서버로 전송할 때 사용된다.
서버와 교류를 할 때 필수적으로 id역할로 사용된다.
- id 속성 : 입력 컨트롤을 식별하기 위해서 사용된다.
- readonly 속성 : 읽기 전용 입력 컨트롤로 만든다.
값을 변경할 수 있다.
- disabled 속성 : 입력 컨트롤을 비활성화 시킨다.
값을 변경할 수 없고, 해당 입력 컨트롤의 값은 서버로 전송되지 않는다.
- placeholder 속성 : 입력값 힌트를 제공한다.
- maxlength 속성 : 최대 입력 문자 갯수를 지정한다.
- value 속성 : 입력값을 지정한다.
- chekced 속성 : 라디오버튼, 체크박스를 미리 선택되게 한다.
- select 태그
- 콤보박스 생성
- 사용자가 값을 입력하는 대신 나열된 값 중에 하나를 선택하도록 하는 드롭다운 목록을 생성한다.
<select name="서버에 전달할 이름">
<option value="값1">내용1</option>
<option value="값2">내용2</option>
<option value="값3">내용3</option>
<option value="값4">내용4</option>
</select>
* 서버에는 선택된 옵션의 value에 설정된 값이 전달된다. 내용은 전달되지 않는다.
- option 태그의 주요 속성
- value : 서버로 전달될 값을 설정한다.
- disabled : 해당 항목을 선택하지 못하게 한다.
- selected : 해당 항목이 미리 선택되어 있게 한다.
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 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Form3</title> </head> <body> <h1>select 태그 연습하기</h1> <form action="register.jsp"> <label>학력</label> <select name="school"> <option value="E"> 초등학교 졸업</option> <option value="M"> 중학교 졸업</option> <option value="H"> 고등학교 졸업</option> <option value="U" selected="selected"> 대학교 졸업</option> <option value="G"> 대학원 졸업</option> </select><br /> <label>전공</label> <select name="major"> <optgroup label="인문대학"> <option value="KD"> 국어국문학과</option> <option value="ED"> 영어영문학과</option> <option value="BD"> 신문방송학과</option> </optgroup> </select><br /> <label>이메일</label> <input type="text" name="email1">@ <select name="email2"> <option value="" disabled selected="selected">선택하세요</option> <option value="daum.net">daum.net</option> <option value="naver.com">naver.com</option> <option value="google.com">google.com</option> <option value="D">직접 입력</option> </select> <input type="submit"> </form> </body> </html> | cs |
< 실행 결과 >
10행을 보면, 나중에 JSP를 할 때 다루겠지만,
<form action="register.jsp"> 는 form태그의 submit을 하면 안의 값들을 register.jsp파일로 보낸다는 의미입니다.
- textarea 태그
- 여러 줄을 입력할 수 있는 텍스트 영역을 만든다.
- 주요 속성
- rows : 텍스트영역의 세로 길이(행의 길이)를 설정한다.
- cols : 텍스트영역의 가로 길이(문자 길이)를 설정한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Form4</title> </head> <body> <h1>textarea 태그 연습하기</h1> <form> <label>사용자명</label> <input type="text" name="username" value="홍길동" /><br /> <label>자기소개</label> <textarea name="profile" cols="50" rows="5">나는 나다.</textarea><br /> <input type="submit"> </form> </body> </html> | cs |
오늘까지의 포스팅으로 html의 기초적인 태그들에 대해서 다뤄봤습니다.
그동안 배운 태그와 속성을 이용해서 밑의 사진 2가지와 같이 나오게 코딩해보시기 바랍니다.
해답 html파일입니다.
sample26-ex.html웹개발을 위한 기초적인 html 에 대해서 저의 설명은 여기까지입니다.
다음 포스팅에서 JSP를 다룰때 form의 name값들의 이동이나 좀더 자세한 것 들을 다루게 될 예정이오니,
다음 포스팅도 관심깊게 봐주시면 감사하겠습니다.