오늘은 HTML 태그중 가장 중요한 태그라 할수있는 Form 태그에 대해 포스팅하겠습니다.
폼 태그를 처음 접하시는 분들은 회원가입을 생각하시면 되겠습니다.
사실 HTML은 프로그래밍 언어이지만 이해보단 많이 써본놈이 잘 씁니다.(단순암기에 가깝죠!!)
먼저 코드와 결과를 보시죠!!
<코드>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>Form 태그 강의</title> </head> <body> <form action="#" method="post"> 이름 : <input type="text" name="uname"/><br/><br/> 비밀번호:<input type="password" name="upw"/><br/><br/> 연락처:<input type ="text" name="uphone1" size="5"> - <input type="text" name="uphone2" size="5"> - <input type="text" name="uphone3" size="5"> <br/><br/> 사진: <input type="file" name="upic"/><br/><br/> 성별: <input type="radio" name="gender" value="m">남 , <input type="radio" name="gender" value="f">여 <br/><br/> 취미: <input type="checkbox" name="basketball" value="bb" checked="checked"/> 농구, <input type="checkbox" name="socker" value="sc"/>축구, <input type="checkbox" name="baseball" value="ba"> 농구 <br/><br/> <input type="submit" value="회원가입"/> </form> </body> </html> | cs |
form 태그는 action 과 method 속성이 있습니다.
action은 쉽게 말해서 내가 html을 요청하고 싶은 녀석을 적어주시면 됩니다. 보통 ~.jsp , ~.html 파일을 적어줍니다.
여기서 #은 의미가 없다고 생각하시면 됩니다. 즉, 넘겨줄 녀석이 없다는 의미입니다.
method는 전송방식을 말합니다. post 방식과 get 방식이 존재하는데 여기선 post방식을 적어주었습니다.
Input 태그는 type,name,value 등의 속성이 존재합니다.
type 속성은 input 태그의 사용용도를 가르킵니다.
- text : 단순이 입력을 받아들입니다.
- password: 입력값을 비공개로 막습니다.
- file: file 업로드 할수 있도록 해주는 역할
- radio : radio 버튼 , name 값을 똑같이 해줘야 한다.
- checkbox: checkbox 버튼 , name 값을 똑같이 해줘야 한다.
- submit : action속성에 적은 놈으로 html을 던져주는 역할
name 속성은 서버에서 데이터를 받아 들일때 구별할수 있는 이름을 말합니다.
value 속성은 값을 나타냅니다.
# Tip
위의 코드에서 설명하진 않았지만 id와 name 속성이 있습니다.
id는 페이지 안에서 유일해야 하며(중복x) , name은 중복될수 있습니다.
화면을 구성하는 모든것을 각각 접근해야 할때는 id 값을 사용해야 하고,
그룹으로 접근하고 싶을땐 name을 활용하시면 됩니다.
<결과>
'프로그래밍 강의 > HTML 과 CSS' 카테고리의 다른 글
| [HTML/CSS] Chapter7. id(#) , class(.) 을 이용한 CSS (0) | 2018.09.15 |
|---|---|
| [HTML/CSS] Chapter6. 블록요소와 라인요소 (0) | 2018.09.14 |
| Chapter4. 테이블 태그!! (0) | 2018.09.06 |
| Chapter3. 리스트 태그!! (0) | 2018.09.06 |
| Chapter2. html 시작과 간단한 태그!! (0) | 2018.09.04 |
