[HTML] 입력 받는 <form> | Scanner와 작별
- WEB
- 2021. 6. 22.
웹개발을 공부할 때 자바(Java)를 거쳤다면 데이터 입력 시 Scanner 클래스를 왕왕 사용했을 것이다. 그러나 실제 웹 브라우저에서 입력을 담당하는 건 HTML의 <form> 태그다. 로그인을 할 때, 양식을 채워 넣을 때, 검색할 때 등 웹사이트에선 무수히 많은 사용자 입력과 서버의 응답이 form 태그를 통해 이루어진다.
아래 예시는 성과 이름을 넣고 제출을 하는 간단한 화면이다.
입력 칸은 여러 개인데 제출 버튼은 하나다. 하나의 form 태그 안에는 여러 개의 input 태그가 포함될 수 있다. 그러나 form 태그 안에는 또 다른 form 태그가 들어올 수 없다. 위 화면을 만드는 코드는 아래와 같다.
<!DOCTYPE html>
<html>
<body>
<h1>The form element</h1>
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the
server called "action_page.php".</p>
</body>
</html>action : 입력된 데이터가 제출됐을 때 전송되는 주소(URL)가 표시된다.
method : 데이터가 전송되는 방식을 결정한다. HTTP 메서드인데, GET과 POST 방식이 있다. 위 예제에선 일단 GET으로 값을 넣어줬지만 단적인 예시 화면을 만드는 데는 영향을 주지 않는다.
name : 데이터가 전송될 때 해당 데이터의 이름을 표시한다.
반응형
'WEB' 카테고리의 다른 글
| [JavaScript] 원하는 HTML 요소(Element) 찾아가는 방법 (0) | 2021.06.29 |
|---|---|
| [JavaScript] 카카오 우편번호 API 간단하게 적용하기 (0) | 2021.06.28 |
| [JavaScript] .sort(function(a, b) { return a - b; })가 작동하는 원리? (2) | 2021.06.26 |
| [HTML / CSS] 복수 메뉴바 만들기 - float: left | overflow: hidden (0) | 2021.06.23 |
| [HTML] 절대경로 | 상대경로 차이는? (0) | 2021.06.21 |