<!--
입력 양식(input 요소)은 사용자(Client, Web Browser)에게 정보를 입력받는 공간을 말하며 입력 양식 태그(input 태그)를 사용해 만든다.
일반적으로 정적 페이지의 경우에는 웹 서버에서 사용자로 데이터가 전달된다. 하지만 회원가입과 로그인, 검색과 관련된 경우에는 사용자가 서버로 데이터를 보내야 한다.
사용자가 웹 서버로 데이터를 보낼 때 사용하는 가장 기본적인 방법은 입력 양식을 사용하여 사용자로부터 데이터를 입력받아 보내는 것이다.
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>입력양식 태그</title>
</head>
<body>
<!--
form 태그의 필수 속성
①action 속성: 서버에 있는 데이터를 처리하는 페이지를 지정
②method 속성: 데이터를 보내는 방식 지정
ⓐGET 방식: URL에 데이터를 포함(http://www.kmc.com/update.jsp?id=syncjang&pwd=1234)시켜서 전달(보안성이 좋지않음),
ⓑPOST 방식: 많은 데이터를 한번에 전달할 때 사용하고 URL에 데이터를 포함하지 않는다.
을 지정한다.
input 태그의 필수 속성
①type 속성:입력하는 데이터의 형식을 지정
②name 속성:사용자가 입력한 데이터를 저장하는 이름을 지정
-->
<form action="update.jsp" method="POST">
<ul>
<li><input type="text" name="id" autofocus placeholder="아이디 입력" required></li>
<li><input type="password" name="pwd" placeholder="비밀번호 입력" required></li>
<li>취미:<input type="checkbox" name="hobby" value="영화감상" checked> 영화감상
<input type="checkbox" name="hobby" value="음악감상"> 음악감상
<input type="checkbox" name="hobby" value="운동"> 운동</li>
<li>성별:<input type="radio" name="gender" value="남자"> 남자
<input type="radio" name="gender" value="여자"> 여자</li>
<li>
<select name="food">
<option>==음식선택==</option>
<option value="김밥"> 김밥</option>
<option value="떡볶이"> 떡볶이</option>
<option value="순대"> 순대</option>
<option value="어묵"> 어묵</option>
</select>
</li>
<li><input type="submit" value="회원가입"></li>
<li><input type="reset" value="초기화"></li>
<li><input type="button" value="버튼"></li>
<li><input type="search" name="keyword" autofocus placeholder="검색어 입력" required></li>
<li><input type="tel" name="tel" pattern="\d{3}[\-]\d{4}[\-]\d{4}" placeholder="전화번호 입력"></li>
<li><input type="email" name="email" placeholder="이메일 입력"></li>
<li><input type="url" name="url" placeholder="url입력"></li>
<li>주문개수:<input type="number" name="num" min="1" max="10"></li>
<li><input type="color" name="color"></li>
<li><input type="range" name="size"></li>
<li><input type="date" name="date"></li>
<li><input type="datetime-local" name="datetime"></li>
<li><input type="month"></li>
<li><input type="week"></li>
<li><input type="time"></li>
</ul>
</form>
</body>
</html>
'Coding' 카테고리의 다른 글
| CSS 선수학습(3) (0) | 2021.07.13 |
|---|---|
| CSS 선수학습(2) (0) | 2021.07.12 |
| html 선수학습(6) (0) | 2021.07.08 |
| html 선수학습(5) (0) | 2021.07.07 |
| html 선수학습(4) (0) | 2021.07.06 |