<form> 태그
form 태그는 사용자가 웹 서버로 어떠한 정보를 보낼때 사용하는 태그이다.
회원가입이나 설문조사 같이 서버에서 요구하는 정보를 경로를 지정해서 보낼 수 있게된다.
<form> 태그 사용법
form.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="https://localhost/UserInfo.php">
<p>성함:<input type="text" name="name"></p>
<p>거주지역:<input type="text" name="residence"></p>
<input type="submit">
</form>
</body>
</html> (실행결과)
<form action="https://localhost/UserInfo.php">
<p>성함:<input type="text" name="name"></p>
<p>거주지역:<input type="text" name="residence"></p>
<input type="submit">
</form>form 태그는 서버에 입력한 값을 제출해야하는 부분(input 태그)을 감싸고 있어야 하고 action 속성을 이용하여 정보를 보낼 경로를 지정해야 한다.
아까의 예제코드에서 제출버튼을 눌렀을때 URL부분을 자세히 보면
빨간색으로 밑줄이 그어져 있는 부분이 action 속성 값과 같고,
노란색으로 밑줄이 그어져 있는 부분이 각각 input 태그의 name 속성 값과 같다.
저 URL의 뜻은, 작성자가 지정한 가상의 경로인 "https://localhost/UserInfo.php"에다가 name이란 질문으로 ludeno라는 값이 들어가고, residence라는 질문으로 서울이라는 값이 들어간다는 것이다. 그리고 그 값들을 URL에 담아서 보내는 이른바 "GET" 방식을 사용하게 된다.
만약 개발때 프론트엔드와 백엔드 둘 다 개발자 본인이 관리한다면, action의 속성 값을 어떤걸 넣어야 될지 알테지만,
프론트엔드만 관리한다면, 속성 값에 어떤 경로를 넣어야 될지는 잘 모를것이다. 그럼 저 경로부분에 대해서는 백엔드를 관리하는 개발자가 알려줄 것이다.
설명이 조금 부족했지만, 이 부분에 대해서는 나중에 백엔드쪽 공부를 진행하게 되면 자연스레 이해하게 될 것이다.
'HTML_CSS > HTML' 카테고리의 다른 글
| 사용자의 입력 값을 받을 수 있는 또 다른 태그 <select> 태그 (0) | 2021.06.06 |
|---|---|
| 사용자의 입력 값을 받을 수 있는 <input> 태그 (0) | 2021.06.05 |
| 표를 만들어주는 <table> 태그 (0) | 2021.05.31 |
| HTML 주석 기능 (0) | 2021.02.28 |
