HTML 열두 번째 포스트입니다.
지난 포스트에서는 표를 만드는 table 태그를 공부했습니다.
오늘은 사이트에 로그인을 할 때나 글을 작성할 때 쓰는 form 태그의 기본을 공부해보겠습니다.
(참고로 말씀드리면 HTML을 공부하는 이유가 블로그를 꾸미는 정도라면 사용할 일은 없을 테니 그런 분들은 가볍게 보고 넘어가셔도 될 것 같습니다.
방문자가 회원가입을 하거나 게시판에 글을 남기는 웹사이트를 만든다면 필수입니다.)
form 태그의 기본
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/login.php">
<p>아이디 : <input type="text" name="id"></p>
<p>비밀번호 : <input type="password" name="pwd"></p>
<p>주소 : <input type="text" name="address"></p>
<input type="submit">
</form>
</body>
</html>
<form> 태그는 웹사이트의 사용자가 입력한 내용을 서버로 전송을 해주는 태그입니다.
<input> 태그는 form 태그 안에 들어가는 것으로 텍스트를 입력할 수 있는 컨트롤을 만들어주는 태그입니다.
form action="서버 주소"에는 데이터를 전송받을 서버의 주소를 넣어주시면 됩니다.
서버로 전송한다는 말은 지금 단계에서는 이해하기 힘든 말입니다. 그냥 그러려니 하시고 넘어가셔도 됩니다.
(백엔드를 담당하는 프로그래밍 언어를 배워야 이해할 수 있습니다.)
input 태그의 type="" 값에 text라고 넣으면 그냥 일반 텍스트를 타이핑할 수 있고,
password라고 넣으면 비밀번호를 입력하는 컨트롤이 생성돼서 타이핑을 해도 화면에 그 내용이 노출되지 않습니다.
submit이라고 넣으면 전송 버튼이 만들어집니다.
그리고 각 컨트롤에 입력하는 내용을 구분 지어주기 위해서 반드시 name=""에 이름을 따로 지정해주셔야 합니다.
위의 소스 코드로 html 파일을 저장하고 열어보면 이와 같은 기본 form 태그의 구성이 완성이 됩니다.
제출을 클릭하셔도 만들어진 서버가 없기 때문에 에러만 뜰 겁니다.
댓글 쓰기
1. 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
2. 가능하면 비로그인 방문자 분께서는 익명보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
3. 구글 블로그에 댓글을 쓰고 '게시' 버튼을 클릭했을 때 가끔 에러가 발생해서 댓글이 날아가는 이슈가 있습니다.
혹시 장문의 댓글을 남기실 분들은 혹시 모를 에러를 대비해 '게시' 버튼 클릭 전에 댓글을 복사해두세요.