HTML 강좌 form 구조에 대해서
안녕하세요 엘빈입니다.
저번 포스팅에서는 링크 관련 태그들을 알아보았습니다.
이번 포스팅에서는 입력을 위한 태그 form에 대해서 알아보겠습니다.
웹에서 form은 자주 사용됩니다. Form이 무엇이냐고요?
로그인 버튼, 회원가입 페이지 등 사용자가 입력을 하는 창을 보신 적이 있을 것입니다.
빈칸의 내용을 입력하고 제출 버튼을 클릭하면 이 입력 내용들은 웹 서버로 보내집니다.
이러한 입력 및 제출과 관련한 기능을 제공하는 태그가 form인 것입니다.
form 태그 만들기
Form 태그는 속성을 통해 서버로 어떤 방식으로 넘길 것인지, 어떻게 처리할 것인지를 지정할 수 있습니다.
사용하는 속성은 다음과 같습니다.
|
method |
넘겨주는 방식을 지정합니다. (get, post) |
|
name |
폼의 이름을 지정합니다 |
|
action |
내용을 처리할 서버 상 프로그램 지정 |
|
target |
지정한 스크립트 파일이 현재 창이 아닌 다른 위치에 열도록 지정 |
한번 기본적인 form 코드를 작성해볼까요?
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset = "utf-8">
5 <title>첫 홈페이지 만들기 프로젝트</title>
6 </head>
7 <body>
8 <form method="get" action="/login">
9 <input type="text">
10 <input type="submit" value="검색">
11 </form>
12 </body>
13 </html>
Input 태그는 입력을 위한 기능을 제공합니다
Type 속성을 통해 다양한 입력 형태를 구현할 수 있습니다.
이 코드를 브라우저로 열게 되면 다음과 같이 화면에 표시됩니다.
검색 버튼을 누르면 주소창에 /login으로 이동하는 것을 알 수 있습니다.
label 태그
Label 태그는 input 태그를 설명하기 위해 존재합니다.
이 입력칸에 무엇을 적어야 하는지를 알려주는데요.
다음과 같은 코드를 작성해봅시다.
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset = "utf-8">
5 <title>첫 홈페이지 만들기 프로젝트</title>
6 </head>
7 <body>
8 <form method="get" action="/login">
9 <label>검색어</label>
10 <input type="text">
11 <input type="submit" value="검색">
12 </form>
13 </body>
14 </html>
검색어가 입력창 옆에 표시된 것을 알 수 있습니다.
대부분 form 형식은 label 태그로 제목 입력 후 input 태그를 사용하는 형식입니다.
input 태그
Input 태그는 입력을 위한 태그입니다.
Type 속성을 통해 다양하게 구현할 수 있습니다.
많은 속성값이 존재하며 그 중 자주 사용하는 유형을 표로 나타내겠습니다.
|
text |
텍스트 입력 |
|
|
이메일 입력 |
|
password |
비밀번호 입력 |
|
checkbox |
체크박스 선택 |
|
submit |
서버전송버튼 |
|
button |
버튼 삽입 |
이 외에도 많은 속성값이 존재합니다.
다음과 같은 코드를 입력해봅시다.
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset = "utf-8">
5 <title>첫 홈페이지 만들기 프로젝트</title>
6 </head>
7 <body>
8 <form method="get" action="/login">
9 <label>텍스트</label>
10 <input type="text"><br>
11 <label>이메일</label>
12 <input type="email"><br>
13 <label>비밀번호</label>
14 <input type="password"><br>
15 <label>체크박스</label>
16 <input type="checkbox"><br>
17 <label>비밀번호</label>
18 <input type="submit" value="제출"><br>
19 <input type="button" value="버튼">
20 </form>
21 </body>
22
화면에 표시된 것과 같이 속성값에 따라 다양한 형태를 보입니다.
Input은 html 웹문서를 작성하는데 가장 많이 사용하는 태그들 중 하나입니다.
각 type 속성값에 따라 value같이 부가적인 속성들도 지정할 수 있습니다.
Form 하나당 꼭 한 개 이상의 submit 버튼이 존재해야 합니다.
# 마무리
요약해보자면 form 구조는 다음과 같습니다.
(1) 가장 바깥쪽은 form 태그에 둘러싸여 있습니다.
(2) form 태그 안에 label과 input 태그로 구성되어 있습니다.
(3) 사용자가 submit 버튼을 누르면 method 방식으로 action 프로그램을 실행합니다.
Input 태그에 대해서 공부할 것이 많습니다.
다음 포스팅에서 input과 관련된 많은 속성값들에 대해서 알아보겠습니다.
포스팅 읽어주셔서 감사합니다.
이전 HTML 포스팅들
'개발 > HTML_CSS' 카테고리의 다른 글
| CSS 기초적인 내용 정리, 쉽게 이해해보자! (0) | 2020.01.18 |
|---|---|
| HTML 강좌 input 태그 총정리 (0) | 2020.01.13 |
| HTML 강좌 9 링크 관련 태그(a,map,area) (0) | 2020.01.12 |
| Html 강좌 8 이미지 관련 태그 정리 (0) | 2020.01.12 |
| html 강좌 7 표(테이블) 관련 태그 정리, 간단하게 만들자 (0) | 2020.01.11 |
