HTML Forms and Form Processing

HTML Form Elements

1. Form: Main container for form elements

   • Key attributes: method, action, enctype
   • Default enctype is "application/x-www-form-urlencoded"
   • Use "multipart/form-data" for file uploads Example:

   <form method="post" action="/submit" enctype="multipart/form-data">
     <!-- Form elements go here -->
   </form>

2. Input: Creates various input types

   • Default type is text
   • Other types: color, date, time, email, number, range, file, etc.
   • Always include a name attribute Example:

   <input type="text" name="username" placeholder="Enter username">
   <input type="email" name="email" placeholder="Enter email">
   <input type="file" name="avatar">

3. Textarea: Multi-line text input Example:

   <textarea name="comment" rows="4" cols="50"></textarea>

4. Select: Dropdown list or multi-select

   • Can use multiple attribute for multiple selections
   • Contains <option> elements Example:

   <select name="country">
     <option value="usa">United States</option>
     <option value="canada">Canada</option>
     <option value="uk">United Kingdom</option>
   </select>

5. Checkbox: Toggle input

   • Submits "on" when checked, undefined when unchecked Example:

   <input type="checkbox" name="subscribe" id="subscribe">
   <label for="subscribe">Subscribe to newsletter</label>

6. Radio Button: Mutually exclusive options

   • Group by using the same name attribute Example:

   <input type="radio" name="gender" value="male" id="male">
   <label for="male">Male</label>
   <input type="radio" name="gender" value="female" id="female">
   <label for="female">Female</label>

7. Label: Associates text with form controls

   • Use for attribute or wrap the input Example:

   <label for="name">Name:</label>
   <input type="text" id="name" name="name">

8. Hidden: Includes non-visible data in form submission Example:

   <input type="hidden" name="user_id" value="12345">

9. Submit: Initiates form submission

   • Can be <input type="submit"> or <button type="submit"> Example:

   <input type="submit" value="Submit Form">
   <!-- or -->
   <button type="submit">Submit Form</button>

Processing Form Data

URL Encoded Form Data

1. Set up an Express.js server
2. Create an HTML form with appropriate controls
3. Use body parsing middleware:

   app.use(express.urlencoded({ extended: true }));
4. Create a route handler for form submission:

   app.post('/addEntry', (req, res) => {
     // Handle form data in req.body
   });
5. Special consideration for checkboxes:

   req.body.active = req.body.active ? true : false;

Multipart Form Data (File Uploads)

1. Use enctype="multipart/form-data" in the form
2. Install and configure Multer middleware:

   const multer = require('multer');
   const upload = multer({ dest: 'uploads/' });
3. Apply Multer middleware to the route:

   app.post('/uploadEntry', upload.single('avatar'), (req, res) => {
     // Access form data: req.body
     // Access file info: req.file
   });
4. For more control over file naming, use diskStorage:

   const storage = multer.diskStorage({
     destination: 'uploads/',
     filename: function (req, file, cb) {
       cb(null, Date.now() + path.extname(file.originalname));
     },
   });
   const upload = multer({ storage: storage });

Important Considerations

• Always validate and sanitize form data on the server-side.
• For cloud hosting with ephemeral or read-only file systems, consider using services like Cloudinary for file storage.
• Ensure proper error handling and user feedback in your form processing logic.