본문 바로가기

Tip&Tech/Web

[Head First HTML with CSS & XHTML] 8. 폼 잡아보자! 대화식 페이지 만들기~!

* 본 내용은 Heade First HTML with CSS & XHTML의 내용을 참고로 요약, 정리한 것입니다.
* 퍼가실 때는 아래와 같은 출처를 꼭! 밝혀주세요!
원본 : http://blog.missflash.com/
출처 : MissFlash.com, http://www.missflash.com/

* XHTML 폼(대화식 페이지 만들기)
1. <form>
 - <form action="http://www.missflash.com/form.php" method="POST"></form>

2. 폼 안의 내용
 - <input type="이름" ... />
 - 이름 : text, submit, radio, checkbox

 - <textarea name="Contents" rows="10" cols="10"></textarea>

 - <select name="Selection"><option vlaues="A>A</option></select>

3. POST vs. GET
 - POST는 폼 변수들을 묶어서 보이지 않게 서버로 보냄
 - GET은 폼 변수들을 묶기는 하지만 서버로 요청을 보내기 전에 URL 끝에 그것을 붙여서 보냄
 - 보안이 요구되는 상황에서는 POST 요청
 - Textarea 폼을 쓸 때도, POST 요청을 써야 함(GET은 256개의 문자만 전송할 수 있기 때문)

4. 정렬
 - text-align:right;
 - vertical-aligh:top;

5. fieldset & legend
 - <fieldset><legend>그룹제목</legend><input ... /></fieldset>
 - 한 그룹의 폼을 제목으로 묶는 방법

6. label
 - <input ... id="name" /><laber for="name">Name</label>
 - label로 감싼 텍스트를 클릭해도 해당 폼을 실행할 수 있음

7. password
 - <input type="password" name="Information">

8. 파일 입력
 - <input type="file" name="Document">
 - 파일 입력 폼을 사용하기 위해서는 POST 방식을 사용해야 함
 - 서버 측 웹 어플리케이션에 파일 업로드 기능이 있어야 함

9. Multiple selection
 - <select name="Hobby" multiple="multiple">...</select>
 - 단일 선택 메뉴를 다중 선택 메뉴로 변환할 수 있음