본문으로 건너뛰기

Form Tag

Forms collect information on web pages and send this collected data to the server.

For instance, forms can be used to collect names, email addresses, and passwords during user registration and then send this data to the server.

Completing a form on a webpage is akin to filling out an exam paper. In an exam, you fill in the blanks with answers or choose from multiple-choice questions.

Web page forms operate under a similar principle. They allow users to enter text or select from various options.


Basic Structure

The <form> tag is used in HTML to create a form. It's like the cover page of an exam paper, which contains various items for input.

Basic Form Structure
<form action="" method="">
<!-- Various input elements for user input go here -->
</form>
  • action: Similar to submitting an exam paper to a teacher, it indicates the URL to which the form data will be sent.

  • method: This part defines how the form data will be sent to the server. Usually, the "GET" or "POST" method is used.


Input Elements

Forms can contain a variety of input elements like text fields, radio buttons, and checkboxes.

These elements are comparable to different question types on an exam (objective, subjective, etc.).


Text Input

Text input is created using the <input> tag, akin to answering a written question on an exam.

Text Input Field
<input type="text" name="username" placeholder="Enter your name" />
  • type: Determines the type of the input field. Here it is "text" to enter general text.

  • name: It's the key that is used when the data is sent to the server, similar to a question number on an answer sheet.

  • placeholder: Text that appears in the input field when no entry has been made, indicating to users what they should input.


Button

Buttons are created with the <button> tag and serve the function similar to the one used to submit an exam paper.

Submit Data with a Button
<button type="submit">Submit</button>

Checkbox and Radio Button

Checkboxes and radio buttons are made with <input type="checkbox"> and <input type="radio">, respectively.

Checkboxes are like questions on a test that ask you to 'select all that apply,' whereas radio buttons are for 'select only one item' multiple-choice questions.

Checkbox and Radio Button
<input type="checkbox" name="hobby" value="reading" /> Reading
<input type="radio" name="gender" value="male" /> Male

Form Data Submission

Data entered in forms is usually sent to a web server, processed there, and then used to proceed with subsequent actions.

This is similar to how a teacher receives and grades an answer sheet.

Forms are handled by utilizing a variety of input elements to collect data from users and then sending it to the server. Forms are used in all places on web pages where you log in or submit information.

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!