Form handling: Form Attributes, Elements, Input Types, Input Attributes, Form Validation

📖 Theory

The Silent Portfolio

You have built a brilliant online portfolio showcasing your coding skills. A recruiter lands on your site, loves your projects, and wants to hire you. But there is a huge problem: your page is a one way street. They can only read your text, but they cannot talk back to you. They have no way to type their name, drop their email, or leave a message. How do we transform a passive reading webpage into an interactive portal that collects user data?

📖 Theory

The Bank Deposit Slip

Think of a physical deposit slip at a bank. It has designated rectangular boxes for your account number, name, and cash amount. It also has instructions on where to submit it. If you write your name in the cash box, the teller rejects it. An HTML form functions exactly like this paper slip. It provides dedicated blank slots for specific data types and ensures all the gathered details are bundled up properly before being handed over to a server.

📖 Theory

Anatomy of an HTML Form

In web development, an HTML form is a section of a document containing interactive controls to collect user data. It is defined using the wrapper <form> tag. It relies on two critical attributes: action, which specifies the destination URL where data is sent, and method, which defines the HTTP protocol (usually GET or POST) used to transfer the data. Inside this wrapper, we place various input elements to capture text, selections, or button clicks.

📊 At a glance

Essential HTML form components and control elements.

⌨️ Practical

A Validated Portfolio Contact Form

<form action="submit_contact.php" method="POST">
  <label>Your Full Name:</label>
  <input type="text" name="fullName" placeholder="Enter name" required>

  <label>Email Address:</label>
  <input type="email" name="userEmail" placeholder="name@email.com" required>

  <label>Your Message:</label>
  <textarea name="userMessage" rows="4" placeholder="Write your message here"></textarea>

  <input type="submit" value="Send Message">
</form>

This example runs in Gri-Learn on the web, where you can edit it and see the output.

🧩 Quiz

You are building a contact form for a college assignment. When you click the submit button, the page refreshes but no data from the text inputs is sent to the server script. What did you likely forget to include?

1. The placeholder attribute inside the input tags
2. The name attribute inside each input tag
3. The text type attribute inside the textarea tag
4. The value attribute inside the label tags

💭 Think first

Predicting Validation Behavior

Mentally evaluate what happens if a user tries to type just 'hello' into an input field defined as type="email" and clicks submit. Think before tapping.

⚠️ Watch out

The Ghost Submission Trap

A major error that fails university practical evaluations is creating inputs without name attributes, or mixing up id and name. Students often think id is enough because it styles the element via CSS. Remember: id is for client side styles and scripts, but name is mandatory for server side data collection. An input without a name is a ghost control: it looks perfect on screen but transmits absolutely nothing!

✏️ Formula

Exam Answer Recipe: Form Architecture

When asked to code a validated form in a theory exam, structure your response with these four components:

• Container: Define the <form> wrapper with explicit action and method="POST" attributes.
• Identity: Provide a unique name attribute for every single user control element.
• Validation: Attach constraints like required or type="email" directly to relevant input tags.
• Trigger: End the form with an explicit <input type="submit"> control to process the submission.

✅ Summary

Key takeaways

• The <form> tag requires an action attribute for the destination and a method attribute for transmission.
• Input elements use specific type attributes like text or email to change their structural behaviors.
• The name attribute is absolutely mandatory for data to be successfully captured by the backend server.
• Attributes like required and placeholder provide instant browser validation and helpful user hints.
• Memory Hook: Setup the action, name every control, add validation, and submit is your goal.