HTML공부

form 요소

웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있다.
또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용한다. 

<form action="처리할페이지주소" method="get|post"></form>

action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시한다.
이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 한다.

method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시한다.

따라서 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달된다.

method 속성
method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET 방식과 POST 방식으로 나눠진다.

 

GET 방식은 주소에 데이터(data)를 추가하여 전달하는 방식이다.
데이터가 주소 입력창에 그대로 나타나며, 전송할 수 있는 데이터의 크기 또한 제한적이다.
따라서 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용한다.

POST 방식은 데이터(data)를 별도로 첨부하여 전달하는 방식이다.
데이터가 외부에 드러나지 않으며, 전송할 수 있는 데이터의 크기 또한 제한이 없다.
따라서 보안성 및 활용성이 GET 방식보다 좋다.

---

reasonly 속성 vs disable 속성

 

readonly 속성은 사용자가 입력 필드를 볼 수는 있으나, 수정할 수는 없도록 설정합니다.
disabled 속성과 다른 점은 전송 버튼(submit)을 누르면 초깃값이 서버로 전송된다는 점입니다.

disabled 속성은 사용자가 입력 필드를 아예 사용할 수 없도록 설정합니다.
disabled 속성이 설정된 입력 필드는 사용할 수도 없고, 클릭할 수도 없습니다.( 서버로 전송 안됨) 

학과 : <br><input type="text" name="department" value="컴퓨터공학과" readonly><br>
학과 : <br><input type="text" name="department" value="컴퓨터공학과" disabled><br>

---

HTML5 

 

HTML5는 웹 상에서 콘텐츠(content)를 구성하고 보여주기 위한 HTML 언어의 최신 표준 권고안입니다.
HTML5는 HTML 4.01, XHTML 1.1 등을 대체하는 HTML의 차세대 표준입니다.
HTML5는 XML이나 XHTML과는 달리 문법적으로 매우 유연하게 대처합니다.

 

---

form 속성

form 속성은 해당 input 요소의 위치에 상관없이 포함될 form 요소를 명시해 줍니다.

포함할 form 요소의 id 속성값을 공백으로 연결하여, 둘 이상의 form 요소에 포함할 수도 있습니다.

<form action="/examples/media/request.php" id="user">
    사용자 : <input type="text" name="username"><br><br>
</form>

...

비밀번호 : <input type="password" name="password" form="user">