#03. HTML 입력 양식
저번에 실습하기 위한 환경 세팅을 다 하였으니, 이제 본격적으로(?) 시작하는 느낌이 든다. 사용자의 입력을 받기 위해 필요한 HTML에 대해서 다뤄보았다. 사실 HTML/CSS를 대학교 1~2학년 때 하고, 3~4학년 때는 앱을 위주로 하다보니 다 까먹었어서 살짝 걱정도 됐던 것 같다. 하지만 다행히도 수업을 들으니 새록새록 다시 기억이 나는 것 같았고, HTML/CSS 수업이 아니더라도 이렇게 가볍게 HTML을 짚고 넘어갈 수 있어서 좋았다.
1. <input> 태그
▪︎ <input> 태그 속성
- type = 형식 지정 (필수)
- name = 입력 값을 서버 쪽에서 참조하기 위한 이름 (필수)
- value = 입력 값 / 기본 값 미리 설정
- autofocus = 오토 포커스 지정
- placeholder = 입력 값에 대한 설명문 / 텍스트 입력하는 형식에만 적용 (안드로이드에서 EditText의 hint 같은 느낌)
- required = 필수 입력 여부 지정 / 텍스트 입력하는 형식에만 적용
- checked = 기본 선택 여부 지정 / 옵션 선택할 때에만 적용
*name 중요!
: name을 주는 것이 좋다. 나중에 다른 곳에서 참조를 해야하기 때문.
: name이 같으면 같은 그룹이라고 생각하면 이해하기 쉽다.
2. 다양한 타입 알아보기
▪︎ 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
ID <input type="text" name="id" value="kim@abc.com"><br>
Password <input type="password" name="ps" value="111"><br>
E-mail <input type="email" name="eid" placeholder="Insert an eamil address">
Age <input type="number" name="age" value="5" min="1" max="10" step="1"><br>
Sex <input type="checkbox" name="sex" value="man"> Man
<input type="checkbox" name="sex" value="woman"> Woman<br>
Hobby <input type="radio" name="hobby" value="soccer">Soccer
<input type="radio" name="hobby" value="baseball">Baseball
<input type="radio" name="hobby" value="tennis">Tennis<br>
<input type="submit">
</form>
</body>
</html>
1) type="text" 인 경우
ID <input type="text" name="id" value="kim@abc.com"><br>- 기본 값으로 'kim@abc.com'이 입력창에 들어가게 된다.
- <br> : html에서 줄바꿀 때 사용하는 태그이다.
2) type="password" 인 경우
Password <input type="password" name="ps" value="111"><br>- 기본 값으로 '111'이 암호화 되어 입력창에 들어가게 된다.
3) type="email" 인 경우
E-mail <input type="email" name="eid" placeholder="Insert an eamil address">
- 이메일 형식으로 입력하지 않을 시 오류 메시지가 출력된다.
- 입력 창에 값을 입력 하기 전에 'Insert an email address' 라는 문구가 뜬다.
4) type="number" 인 경우
Age <input type="number" name="age" value="5" min="1" max="10" step="1"><br>- 기본 값으로 '5'가 입력창에 들어가게 된다.
- min: 최소값 / max: 최대값 / step : 증감 폭 (ex. step="2" : 2씩 증가 또는 감소)
5) type="checkbox" 인 경우
Sex <input type="checkbox" name="sex" value="man"> Man
<input type="checkbox" name="sex" value="woman"> Woman<br>- checkbox는 여러 개의 옵션을 선택할 수 있다.
- 두 개의 checkbox를 이름이 'sex' 라는 그룹으로 묶어준다.
6) type="radio" 인 경우
Hobby <input type="radio" name="hobby" value="soccer">Soccer
<input type="radio" name="hobby" value="baseball">Baseball
<input type="radio" name="hobby" value="tennis">Tennis<br>- radio는 여러 개의 옵션들 중 하나만 선택할 수 있다.
- checkbox에서와 같이 'hobby' 라는 그룹으로 묶어준다.
7) type="submit" 인 경우
<input type="submit">- 위에서 입력한 값들을 서버로 전송하기 위해 필요한 버튼이 제공된다.
- 아무 값을 설정하지 않으면 기본적으로 '제출' 버튼이 생긴다. (만약 다른 이름으로 수정하고 싶으면 value 값을 지정해주면 된다.)
3. 다양한 입력 태그 알아보기
▪︎ 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function writeComment(){
document.write("test...");
}
</script>
<form action="hello.jsp" method="POST">
ID <input type="text" name="id" value="kim@abc.com"><br>
Number <input type="range" name="num" value="10" min="1" max="120" step="2"><br>
<select name="fruit" multiple>
<option value="apple">Apple</option>
<option value="banana" selected>Banana</option>
<option value="orange">Orange</option>
</select><br><br>
<input type="submit">
</form>
<button onclick="writeComment()">Write a comment</button>
</body>
</html>
1) type="range" 인 경우
Number <input type="range" name="num" value="10" min="1" max="120" step="2"><br>- range로 하면 가로로 막대 바가 나와서 범위 값을 지정할 수 있다.
- number 타입과 동일하게 max / min / step 속성을 지정할 수 있다.
2) <select> 태그
<select name="fruit" multiple>
<option value="apple">Apple</option>
<option value="banana" selected>Banana</option>
<option value="orange">Orange</option>
</select><br><br>- select 태그는 옵션 선택형 이다. (드롭다운 리스트)
- <option> 태그를 <select> 태그 내부에 포함시켜 구현한다.
- 기본 값 설정하기 위해서 'selected' 속성을 사용하여 준다.
- <select> 태그에 'multiple' 속성을 사용하면 드롭다운이 아닌 일반 리스트 형태로 바뀐다.
3) <button> 태그
<body>
<script type="text/javascript">
function writeComment(){
document.write("test...");
}
</script>
...
<button onclick="writeComment()">Write a comment</button>
</body>- <button> 태그는 <form> 태그를 필요로 하지 않는다.
- <button> 태그는 버튼을 클릭했을 시 동작할 것을 자바스크립트로 지정해주어야 한다.
4. <table> 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="login.jsp">
<table align=center>
<tr>
<td colspan=2 align=center height=40><b>로그인</b></td>
</tr>
<tr>
<td align=right>아이디 </td>
<td><input type="text" name="id" placeholder="Email address" required></td>
</tr>
<tr>
<td align=right>패스워드 </td>
<td><input type="password" name="ps" required></td>
</tr>
<tr>
<td colspan=2 align=center height=50>
<input type="submit" value="로그인하기">
</td>
</tr>
</table>
</form>
</body>
</html>- <table> 태그는 2차원 테이블로 표현할 때 사용된다.
- 테이블을 나타내기 위해 <tr>, <td> 태그를 사용한다.
- <table> 태그에서 사용되는 속성
- align : 텍스트의 정렬을 나타냄 (left, right, center 등) / <table> 태그에서 사용되면 테이블의 위치 나타냄
- width : 테이블(요소)의 너비 (가로 길이)
- height : 테이블(요소)의 높이 (세로 길이)
- colspan : 컬럼(열) 확장할 때 사용 / <td> 태그에서 정의
- rowspan : 행을 확장할 때 사용 / <td> 태그에서 정의
+ 는 한 칸 띄어쓰기 표현
'공부 > JSP' 카테고리의 다른 글
| #02. 개발 환경 구축 (0) | 2022.01.20 |
|---|---|
| #01. 웹 프로그래밍의 이해 (0) | 2022.01.19 |
댓글