폼(Form)과 유효성 검사

What is Form?

HTML 에서 <form>이라는 요소는 사용자에게서 얻은 정보를 모으기 위해서 사용됩니다. 예를 들어서 네이버에 접속을 하시게 되면 아이디와 비밀번호를 입력하는 창이 있습니다. 사용자한테서 입력하는 그 공간이 <form>으로 이루어져있다고 생각하시면 됩니다.

오른쪽 위를 자세히 보면 <form>이라는 태그로 이루어져있다.

이렇게 입력된 정보들은 웹 서버와 웹 프로그램을 거쳐서 나중에 사용자가 보고 있는 브라우저에 결과물을 보여줍니다.

 

HTML Form elements

HTML Form에는 다양한 종류의 elements들일 존재하는데요. 그 중 몇 가지를 예시로 알아보겠습니다.

 

The <input> Element

<input>은 폼 요소들 중에서 가장 중요한 요소로 여겨집니다. <input> 또한 여러가지 속성을 가지고 있는데 그 속성에 따라서 다양하게 보여집니다.

• Text Fields
• Radio Buttons
• Submit Button

첫번째로 <input type="text"> Text 같은 경우로는 한줄로 된 input을 정의합니다.

예시

 

두번째로 <input type="radio"> Radio button 입니다. Radio button은 사용자가 선택지에서 한가지만 선택할 수 있도록 합니다.

마지막으로 <input type="submit"> Submit이 있는데요. Submit 버튼은 form 데이터를 서버로 submit해주는 역학을 합니다.

 

input말고도 여러 속성들이 있는데요.

• Action
• Target
• Method

등이 있습니다.

 

What is Validation?

유효성 검사는 말 그대로 웹 페이지를 만들기 위해서는 JavaScript, CSS, HTML 등의 코드를 사용하게 되는데, 이 코드에 에러가 있는지 검사를 해주는 것을 말합니다. 대표적인 사이트로 https://validator.w3.org/ 곳이 존재합니다.