HTML

HTML

πŸ“Œ What is an HTML Form?

A form is a structure used to collect data from users.

Examples:

  1. Login form
  2. Registration form
  3. Search box
  4. Comment section

Forms usually start like this:

HTML

<form>
    <!-- form elements go here -->
</form>

πŸ“Œ 2. Basic Attributes of a Form

HTML
<form action="islem.php" method="post">

πŸ”Ή action:

Specifies where the data will be sent when the form is submitted.

πŸ”Ή method

Specifies how the data will be sent:

  1. get β†’ visible in the URL
  2. post β†’ sent hidden (more secure)

πŸ“Œ 3. The Most Important Form Element: input

HTML
<input type="text">

But the function of the input changes depending on the type

πŸ“Œ 4. Input Types (VERY IMPORTANT)

πŸ”Ή 1. Text (Text field)

HTML
<input type="text" name="title">

πŸ”Ή 2. Password

HTML
<input type="password" name="pass">

πŸ”Ή 3. Email

HTML
<input type="email" name="email">

Performs automatic validation

πŸ”Ή 4. Number

HTML
<input type="number" min="1" max="100">

πŸ”Ή 5. Radio (Single choice)

HTML

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

Same name β†’ only one can be selected

πŸ”Ή 6. Checkbox (Multiple choice)

HTML

<input type="checkbox" name="hobby" value="sport"> Sports
<input type="checkbox" name="hobby" value="music"> Music

πŸ”Ή 7. Submit

HTML
<input type="submit" value="Submit">

πŸ”Ή 8. File (File upload)

HTML
<input type="file">

πŸ”Ή 9. Date

HTML
<input type="date">

πŸ“Œ 5. Label

Very important for user experience:

HTML

<label>Your Name:</label>
<input type="text">

πŸ‘‰ Better usage:

HTML

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

Clicking the label activates the input

πŸ“Œ 6. Textarea (Long text field)

HTML
<textarea rows="5" cols="30"></textarea>

πŸ‘‰ Examples:

  1. Comment section
  2. Message box

πŸ“Œ 7. Select (Dropdown Menu)

HTML

<select>
    <option>Turkey</option>
    <option>Germany</option>
</select>

πŸ“Œ 8. Button

HTML

<select>
    <button>Submit</button>
</select>

πŸ“Œ 9. Required (Mandatory field)

HTML
<input type="text" required>

Cannot be submitted empty

πŸ“Œ 10. Placeholder (Hint text)

HTML
<input type="text" placeholder="Enter your name">

πŸ“Œ 11. Pattern (Regex validation)

HTML
<input type="text" pattern="[0-9]{11}">

Requires an 11-digit number

πŸ“Œ 12. A Real Form Example

πŸ”₯ Let’s combine everything:

HTML

<form action="kayit.php" method="post">
    <label>Name:</label>
    <input type="text" name="names" required><br><br>

    <label>Email:</label>
    <input type="email" name="email" required><br><br>

    <label>Password:</label>
    <input type="password" name="pass"><br><br>

    <label>Gender:</label>
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female<br><br>

    <label>Hobbies:</label>
    <input type="checkbox" name="hobby" value="sport"> Sport
    <input type="checkbox" name="hobby" value="music"> Music<br><br>

    <label>Country:</label>
    <select name="country">
        <option>Turkey:</option>
        <option>Germany:</option>
    </select><br><br>

    <label>Message:</label><br>
    <textarea name="message"></textarea><br><br>
</form>

πŸ“Œ 13. GET vs POST (IMPORTANT)

πŸ”Ή GET

HTML
site.com?ad=Alice

Visible in URL

For small data

πŸ”Ή POST

Not visible in URL

More secure

Preferred for forms

πŸ“Œ 14. Why is name Important?

HTML
<input name="email">

πŸ‘‰ Data sent to backend:

HTML
email=example@mail.com

If there is no name, the data is not sent!

  • Summary

  • HTML Form = <form> + input + user data
  • Most important parts:
  • form
  • input
  • name
  • method
  • action

Html5 and Xhtml
Html Canvas