Form(폼) 태그를 써보자
Form(폼)
태그를 써보자
ㆍ HTML에서 Form 태그는 손가락 안에 꼽히는 중요한
부분입니다.
ㆍ 주로 회원가입이나 로그인등 사용자의 입력을 필요로 할때
사용됩니다.
ㆍ 이번글에서는 Form 태그에서 input 태그부분만 보도록
하겠습니다.
먼저
코드로 Form태그를
생성해보겠습니다.
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <meta charset = "utf-8"> <title>Hello World</title> </head> <body> <form action=""> </form> </body> </html> | cs |
일단 틀 잡는건
이게 끝입니다.
<body> ~ </body> 사이에
<form> ~ </form>을 넣어주시면
됩니다.
그 다음은
<form>태그 안에 코드 몇줄을
추가해서 다음과 같은 화면을
완성시켜보겠습니다.
가장 흔하게 보는
로그인 화면입니다.
이 화면을 만드는 코드를
보도록 하겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <meta charset = "utf-8"> <title>Hello World</title> </head> <body> <form action=""> <p> ID : <input type="text"> </p> <p> PW : <input type="password"> </p> <input type="submit" value="로그인"> <input type="submit" value="회원가입"> </form> </body> </html> | cs |
일단
간단합니다
위에 틀에서 코드 4줄만
추가되었습니다.
이제부터
하나하나 보자면
<form action="">
form 태그의 시작부분으로
action이란 속성을 넣어줘야 합니다
이 부분이 의미하는것은
위에 로그인 화면에서 사용자가
ID, PW등의 정보를 입력하고
로그인 버튼을 눌렀을때
그 정보가 맞는지, 틀리는지를
판단하고 맞으면 그 회원의 정보를
가져오든 어떻게 하든 등등의
일처리가 필요합니다.
이 부분은
서버에서 처리를 하는데
이 입력내용들을 서버에 보내기 위해서
action의 속성값에 주소를 넣어줘야합니다
서버내용은 여기서 다루지 않지만
그래도 모양은 알아야하므로
조금더 내용을 붙여보자면
1 2 | <form action="http:~~" method="get"> <form action="http:~~" method="post"> | cs |
지금은 안써줘도 되지만
나중에는 이런식으로 입력을
하셔야됩니다.
action의 속성값으로 서버주소를 넣어주고
mothod의 속성값으로 get, post를 넣어줘야합니다
(get, post의 차이는 일단 정보의 보안? 은닉성 정도로 알고 넘어가시면 됩니다)
이 부분이야 나중에
다시 알아볼것 같으니
넘어가고
(아 참고로 지금 위에서는 mothod를 생략하였는데
생략시 기본 디폴트로 get으로 인식합니다)
<p> ID : <input type="text"></p>
자 다음으로
이 부분을 보자면
보시면 알겠지만 화면에서
ID를 입력하는 텍스트공간을
생성해주는 코드입니다.
<p>태그로 단락 표시를 해준후에
input 태그를 열어서 type을 결정하게
됩니다.
여기서 속성값으로 "text"를 넣게 되면
사용자가 키보드로 정보를 입력할 수 있는
칸이 생성됩니다
여기서 코드를 더 붙여보자면
저 text 입력란에 디폴트텍스트도
넣을수가 있습니다
아래와 같이 코드를 적어주시면 됩니다
1 | <p> ID : <input type="text" value="itpangpang@tistory.com"> </p> | cs |
input 태그에
value라는 속성을 추가해주시면
됩니다.
이렇게 적은후에 실행을 하게되면
페이지가 열리자 마자
ID 입력란에 텍스트가 자동으로
적혀있는 모습을 볼 수 있습니다.
아 그리고
역시나 서버와 통신을
하는 부분이기 때문에
속성 하나를 더 추가해야 합니다.
1 | <p> ID : <input type="text" name="id" value="itpangpang@tistory.com"> </p> | cs |
중간에 name 속성이
추가된 것을 볼 수 있습니다.
이것의 의미는 서버에서
정보를 넘겨받을때 사용자가
어떤 Input을 넣었는지 확인하기
위해서 필요합니다
예를 들어서
1 2 3 | <p> ID : <input type="text" name="id"> </p> <p> AGE : <input type="text" name="age" > </p> <p> TEXT : <input type="text" name="gender"> </p> | cs |
이런식으로 name을 넣어주면
서버입장에서 아이디, 나이, 성별등
각각을 구분할 수 있게 됩니다.
<p> PW : <input type="password"> </p>
이 부분은
위에랑 똑같은데
대신 type의 속성값이 password입니다
차이점은 비밀번호이기 때문에
화면상에 text가 아닌
*등으로 표시되게
됩니다
<input type="submit" value="로그인">
다음은 버튼 부분입니다.
위와 같이 type의 속성값으로 submit을
넣어주시게 되면
서버와 통신을 하게 되는 버튼이 생성됩니다
여기까지가 보통 로그인하는
화면이었다면 다음은 회원가입의
화면을 아주 간단하게 보겠습니다.
이렇게 간단한
회원가입화면은
없겠지만
일단 이번글에서는
input태그쪽만 보고 있으니
textarea, select등의 내용은
생략하겠습니다.
위의 코드를 먼저 보겠습니다
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <head> <meta charset = "utf-8"> <title>Hello World</title> </head> <body> <form action="http:~~"> <p> ID : <input type="text"> </p> <p> PW : <input type="password"> </p> <p> *PW : <input type="password"> </p> <p> age : <input type="text"> </p> <p> 성별 : <input type="radio" name="gender" value="man" checked="checked">남자 <input type="radio" name="gender" value="woman">여자</p> <p> 유입경로 : <input type="checkbox" name="root" value="people" >지인소개 <input type="checkbox" name="root" value="internet">인터넷 <input type="checkbox" name="root" value="tv">TV</p> <input type="submit" value="회원가입"> </form> </body> </html> | cs |
좀 길어지긴 했는데
새로운 내용은 거의 없습니다.
radio, checkbox만 추가되었습니다.
참고로 라디오버튼과 체크박스의
차이점은 중복선택입니다
라디오는 단일선택, 체크박스는 중복선택
가능입니다
<input type="radio" name="" value="" checked="checked">
라디오 버튼을 먼저보자면
위와 마찬가지로 type의 속성값만
바꿔주시면 됩니다.
한가지 알아둬야 할점은
라디오버튼이든 checkbox 버튼이든
name의 이름은 같게 맞춰주셔야 됩니다
대신 value값을 다르게 해주시면 됩니다.
추가로 checked 속성이 있습니다
속성값으로 checked를 넣어주시게 되면
페이지가 열렸을때 자동으로 체크되어있는것을
확인 하실 수 있습니다.
<input type="checkbox"> ~
type의 속성값만 다를뿐
나머지는 같습니다.
'웹(Web) > HTML' 카테고리의 다른 글
| HTML 표를 만들어보자 (0) | 2016.07.03 |
|---|---|
| HTML 리스트를 만들자(li, ul, ol) (0) | 2016.06.27 |
| HTML에서 하이퍼링크 걸기 (1) | 2016.06.19 |
| HTML 기본구조 및 Hello World 출력하기 (1) | 2016.06.18 |