12. Body - form, label, input
안녕하세요.
콤퓨타 학원에 원장을 하고 있는 이프로입니다. 헤헴 ^^
네이버에 회원 가입해보셨나요?
아니면 로그인 해보신적 인나요?
아이디와 비밀번호를 입력하는 부분 그리고 그 아래 로그인이라는 버튼이 있는데요.
사용자의 특정한 입력을 받아 특별한 처리를 하고 싶을때 form을 사용하는데요.
무조건 form을 사용해야하는 건 아니에요.
일정한 입력을 한번에 받아서 무언가 처리를 해야할때 form태그가 효율적이여서 많이 사용하는데요.
form 태그에 대해서 둘러보도록 할께요.
form 태그 기본 형태
<form action="index.html">
<label for="userid">아이디:</label><br>
<input type="text" id="userid" name="userid"><br>
<label for="userpassword">비밀번호:</label><br>
<input type="text" id="userpassword" name="userpassword"><br>
<input type="submit" value="로그인">
</form>
form태그는 form안에 있는 input태그의 정보를 모아 담아서 사용자와 상호 작용하도록 하는데요.
그렇기 위해서는 서버 사이드 프로그래밍 또는 프론트 앤드 프로그래밍이 필요합니다.
html강의에서는 프로그래밍에 대해서 다루지 않기 때문에 form 활용도가 떨어지지만 기본적인 사용법은 알아야 하니 계속 설명해볼께요.
label 태그, input - text 태그
<label for="userid">아이디:</label><br>
<input type="text" id="userid" name="userid"><br>label 태그는 그냥 body 영역 안에 텍스트를 입력하는 것과 약간 비슷하다고 느껴질건데요.
label 태그 영역 안쪽에 '아이디:'라고 입력해 놓으면 화면에 그대로 표현이 되기때문이에요.
속성중에 for 속성이 있는데요.
for 속성에 값이 바로 아래에 있는 input 태그의 id값과 같다는걸 아실수 있는데요.
name 속성도 값은 이름을 썼지만 name속성 값과는 아무런 관련이 없어요.
이렇게 이름을 똑같이 맞춰놓으면 특별한 기능을 활성화 되는데요.
바로 label쪽에 '아이디:'를 클릭하면 for속성으로 연결된 input 태그의 text 박스에 커서가 자동으로 이동됩니다.
input태그는 사용자에게 입력을 받을수 있도록 기능을 제공해줘요.
type속성의 종류에 따라 텍스트를 입력 할 수 있다거나 라디오 박스, 체크박스 등등 다양한 형태로 유저에게 입력을 받을수 있도록 기능제공해주요.
type속성의 종류에 대해서 한번 불러 볼께요.
<!DOCTYPE html>
<html>
<head>
<title>index.html</title>
</head>
<body>
<form action="index.html">
<input type="text" ><br>
<input type="password" ><br>
<input type="submit" ><br>
<input type="reset" ><br>
<input type="radio" ><br>
<input type="checkbox" ><br>
<input type="button" ><br>
<input type="email" ><br>
<input type="url" ><br>
<input type="number" ><br>
<input type="range" ><br>
<input type="date" ><br>
<input type="time" ><br>
<input type="datetime-local" ><br>
<input type="color" ><br>
<input type="file" ><br>
<input type="hidden" ><br>
<input type="search" ><br>
</form>
</body>
</html>
type의 이름을 보시면 대략적으로 이해를 하실건데요.
text부터 체크박스, 숫자입력, 날짜, 시간등 정말 다양한걸 지원해요.
실제로 이런 데이터를 입력 받아 활용을 하기 위해서는 무조건 프로그래밍을 할 수 있어야 하는데 빠르게 배워 코딩부분도 빼우시는걸 추천 할께요.
거기는 또 세로운 세계니가요.
이번 강의는 여기까지에요.
여러분들의 관심과 사랑이 있다면 좀 더 좀은 컨텐츠를 제공해줄 수 있을거 같습니다.
많은 관심과 사랑 부탁드립니다.
감사합니다.
그럼 콤빠~