HTML forms
Forms
form은 html 상에서 사용자로부터 입력값을 받아오는 데 사용됩니다. 이 form을 통해서 사용자가 입력한 정보를 서버로 보내는 기능을 구현할 수 있게 됩니다. 우리가 흔히 경험해오던 로그인, 회원가입 등의 페이지들을 모두 바로 이 form을 이용해서 구현할 수 있습니다. 즉, 조금 다르게 표현하면 웹 페이지가 클라이언트로부터 정보를 입력받아서 이를 서버 쪽으로 해당정보를 전달하는 기능을 이 form을 통해서 구현할 수 있다는 것 입니다.
아래의 코드는 html의 몇가지 form 태그들을 이용해서 간단한 이름을 입력받는 페이지를 작성한 모습입니다.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
</body>
</html>
html form과 관련된 태그들은 뒤에서 차근차근 다룰 것 입니다. 그렇기 때문에 위의 예시코드는 전체적인 맥락을 파악하는 용도 정도로만 보시면 됩니다. 위의 코드를 보시면서 구현화면과 코드의 어느 부분들이 서로대응 되는 지 한 번 잘 살펴보시길 바랍니다.
<form> Element
사용자로 부터 입력을 받기 위한 목적으로 html 문서에서 사용되는 모든 태그들은 form 태그에 묶여서 사용 됩니다. 하나의 html 문서에서 여러개의 form을 구성하고 사용하는 것이 가능하며 각 form 별로 사용자에게 입력받은 데이터를 특정 문서로 전달하는 것이 가능합니다.(이와 관련된 내용은 차후에 뒤에서 다룹니다.) 각각의 html의 form 태그들은 아래와 같은 양식으로 작성됩니다.
<form>
사용자 입력을 위한 요소가 들어오는 부분
</form>
앞서 이야기한 것처럼 form 태그는 다양한 종류의 input 태그들을 포함하게 됩니다. 그리고 이런 다양한 input 태그들이 모여서 하나의 form을 구성하게 되는 것입니다. 그렇기 때문에 사용자에게 무언가 입력받아서 이를 서버로 전송하는 페이지를 제작하기 위해서는 form이 필요하고 이 form안에 다양한 input 태그들을 사용함으로서 이를 구현할 수 있다고 이해하시면 됩니다.
<input> Element
html 문서 내에 아무리 많은 form들을 만들었다고 하더라도 각각의 form 안에 올바른 input 태그가 들어있지 않다면 우리가 의도한 페이지를 만드는 것은 불가능 합니다. 그렇기 때문에 사용자로부터 입력을 받고 이를 처리하는 웹 페이지를 구현하기 위해서는 다양한 input 태그가 굉장히 중요한 요소이고 그렇기 때문에 대해서 알아야할 필요성이 있습니다.
input 태그들을 살펴보기 전에 먼저 아래의 글을 꼭 읽어봐 주시기 바랍니다!
(이 부분은 저희 학교에서 학생들을 지도 중이신 교수님께서 해주신 말씀 입니다.)
<input> 태그를 공부하기에 앞서서 한가지를 언급하자면 현재 html에서 지원하는 input 태그들의 종류는 정말 많습니다. 그리고 심지어 html은 지금도 개발되고 버전업 되고 있기 때문에 모든 input 태그들의 사용법을 우리가 모두 익히는 것이 불가능할 뿐더러
오히려 생산적이지 못합니다. 다만, 현재 존재하는 다양한 태그들을 직접 사용해보고 나중에 필요할 때 검색해서 사용할 수 있는 수준으로 공부를 해둔다면 나중에 웹 개발을 함에 있어서 문제가 없을 것 입니다.
그러므로 html을 공부하면서 모든 것을 다 외우고 알고 넘어가겠다는 것은 굉장히 무모한 생각입니다. 일단은 우리가 구현해야하는 페이지를 먼저 바라보고 이를 구현하기 위해서는 무엇을 활용할 수 있을 지에 대해서 고민하면서 html을 공부해나가는 것이 여러분들에게 더 좋은 공부가 될 것입니다.
입력의 종류에 대해서 생각해보면 굉장히 다양한 종류의 입력이 존재할 수 있습니다. 예를 들어서 회원가입 페이지를 바라본다고 생각해보면 아이디, 비밀번호, 연락처, 이메일주소, 거주지 주소, 약관 동의 여부 등등 굉장히 다양한 종류의 입력들이 있습니다. 그리고 html은 버전업을 거듭해오면서 이런 다양한 입력들에 대한 대응을 모두 input 태그를 이용함으로서 처리할 수 있도록 지원하고 있습니다.
그렇다면 input 태그는 하나인데 어떻게 다양한 종류의 입력들을 지정할 수 있을 까요? 아래와 같이 input 태그에 type이라는 개념을 사용해서 입력의 형태를 지정할 수 있습니다.
<input type="(type)">
많은 input 태그의 type 중에서 대표적인 몇 가지 예시를 제시한다면 다음과 같습니다.
| 타입(type) | 내용 |
| <input type="text"> | 한줄짜리 text input filed를 출력 |
| <input type="radio"> | radio 버튼을 출력(많은 옵션 중에서 한 가지를 선택하도록 하는 것) |
| <input type="submit"> | submit 버튼을 출력(서버로 사용자 입력내용을 전달하기 위한 버튼) |
텍스트 필드(Text Fields)
<input type="text">는 사용자로부터 한줄의 텍스트입력을 받기위한 단일라인 input을 정의한다.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
위와같이 코드를 입력하여 이를 웹브라우져로 열어보면 다음과 같이 나타난다.
기억하기
-> form은 그 자체로는 보이지 않는다. 또한 input field의 기본 width 값이 character 20임을 기억하자
<label>
무턱대고 input 태그를 이용해서 사용자 입력파트를 구성하게 되면 사용자는 해당 입력파트가 무엇을 입력하는 내용인지 알 수 없습니다. 그렇기 때문에 우리는 보통 input 태그와 label 태그를 묶어서 함께 사용하게 됩니다. label 태그를 통해서 해당 입력파트가 무엇을 입력하는 부분 인지를 사용자에게 표시하는 용도로 사용하게 됩니다.
label 태그는 단순히 input 태그와 이를 묶어서 구성하는 것 뿐만 아닙니다. 만약 사용자가 특정 input 태그와 묶여있는 label의 텍스트를 클릭하는 경우 해당 label과 묶여있는 input 파트가 토글 되기 때문입니다. 그렇기 때문에 이러한 유용성들을 위해서 input 태그와 label 태그를 서로 같은 그룹으로 묶어주는 과정이 필요한데 이를 label 태그의 for 속성을 이용합니다. input 태그와 label 태그를 서로 연동하여 사용하기 위해서는 label 태그의 for 속성과 input 태그의 id 속성을 동일하게 맞춰주어야 합니다. 두 태그의 각 속성들이 같은 값을 공유하게 되면 위에서 이야기한 것처럼 label과 input 태그와 연동되어 동작하게 됩니다.
Radio 버튼
<input type="radio"> 는 radio 버튼을 정의한다.
radio 버튼은 여러개의 선택지나 옵션 사이에서 사용자가 1개만을 선택할 수 있도록 하는 버튼이다.
단순히 사용자가 선택하는 만큼 선택되는 체크박스와 달리 오직 1개만을 선택할 수 있다는 특징이 있다.
<!DOCTYPE html>
<html>
<body>
<h2>Radio 버튼 테스트</h2>
<h3>가장 좋아하는 캐릭터를 한가지만 고르세요</h3>
<form>
<input type="radio" id="라이언" name="캐릭터" value="라이언">
<label for="male">라이언</label><br>
<input type="radio" id="브라운" name="캐릭터" value="브라운">
<label for="female">브라운</label><br>
<input type="radio" id="기타" name="캐릭터" value="기타">
<label for="other">기타</label>
</form>
</body>
</html>
Submit 버튼
<input type="submit">은 사용자로부터 입력받은 데이터를 서버로 전달하기 위한 버튼을 정의한다.
(form data를 form handler로 전달한다고도 표현한다.)
여기서 말하는 form handler는 입력받은 데이터를 처리하기 위한 스크립트가 존재하는 서버의 페이지를 말한다.(백엔드)
form handler는 formdml action이라는 속성을 통해서 지정된다.
<form action="form_ok.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>다음과 같이 입력된 코드를 웹브라우져로 열어보면
다음과 같이 사용자에게 fistname과 lastname을 입력받을 수 있도록 되어있다. 해당 텍스트필드에 값을 입력하고 submit 버튼을 누르면
사용자가 입력한 정보를 form handler로 전달하게 된다.
사용자가 입력한 정보를 form handler로 어떻게 전달하는 지에 대해서는 차후에 자세히 다루도록 하겠다.
Action 속성
action 속성은 양식을 제출할 때 수행할 작업을 정의한다.
사용자가 submit 버튼을 클릭하면 제출한 양식데이터가 서버의 페이지로 전송되는데
<form action="form_ok.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>위의 코드는 이전에 submit 버튼에서 사용한 코드와 동일한 코드이다. 가장 처음에 있는 action 속성을 보면
다음과 같이 action 속성이 정의되어 있다.
<form action="form_ok.php">다음과 같이 action 속성을 정의하면 사용자가 입력하여 생성된 양식데이터를 form_ok.php 라는 서버의 페이지롤 전송하게 된다.
이 페이지에는 양식데이터를 처리하는 서버 측 스크립트가 포함되어 있다.(ex. php 등)
Target 속성
target 속성은 제출된 양식에 대한 결과를 웹 브라우져의 새로운 탭에서 열지, 아니면 현재 페이지에서 열지를 정의한다.
target 속성의 기본값은 _self로 되어 있으며 이는 현재창에 결과페이지를 열 것임을 의미한다.
만약 결과페이지를 새로운 탭으로 띄우기를 원한다면 _blank 속성을 사용하면 된다.
<form action="form_ok.php" target="_self">다음의 경우 제출된 결과는 현재 탭(페이지)에서 열리게 된다.
<form action="form_ok.php" target="_blank">다음의 경우 제출된 결과는 새로운 탭(페이지)에서 열리게 된다.
Method 속성
method 속성은 양식데이터를 제출할 때 사용할 http method를 지정하며 이는 form에서 정보를 전달하는 방식을 의미한다.
method 속성이 가질 수 있는 값의 종류로는 GET과 POST가 있으며 다음과 같이 지정하여 사용할 수 있다.
<form action="form_ok.php" method="get">method를 get으로 지정하여 사용하는 경우
<form action="form_ok.php" method="post">method를 post로 지정하여 사용하는 경우
GET vs POST
양식데이터를 제출할 때 별도로 지정하지 않는다면 기본method는 GET으로 유지된다.
GET은 이름/값의 쌍으로 양식데이터를 url에 포함하는 방식으로 데이터를 전송하는 것이 특징인데
이렇게 되면 로그인이나 회원가입 과정에서 입력하는 사용자 정보가 url에 노출되기 때문에 보안을 필요로하는 데이터를 다루는 경우
GET을 사용하는 것은 바람직하지 않다.
POST의 경우에는 GET의 이러한 문제점을 해결해줄 수 있어 타인에게 노출되면 안되는 민감한 유형의 정보들을 다룰 때 사용할 수 있다.
Name 속성
각 입력필드는 반드시 제출된 name 속성을 가져야 한다.
만약 입력필드의 name 속성을 빠뜨린 경우, 해당 입력필드의 데이터가 전혀 전송되지 않는다는 사실에 주의하자
'Web Basic > HTML' 카테고리의 다른 글
| HTML input types(입력유형) (0) | 2020.07.21 |
|---|---|
| HTML Form Elements (0) | 2020.07.21 |
| Block & Inline 요소 (0) | 2020.07.20 |
| Tables(표) & Lists(목록) (0) | 2020.07.20 |
| HTML Images(이미지) (0) | 2020.07.20 |