Forms | Display Block | Inline Block

Forms | Display Block | Inline Block

📚 HTML Forms

Forms in HTML allow users to input data, which can be sent to a server for processing. Let's go step by step! 🚀

1. HTML Forms (
   )

A form is used to collect user input and send it to a server.

✅ Basic Form Example:

action="/submit-form" method="POST">
     for="name">Name:
     type="text" id="name" name="name">
     type="submit">Submit


Default "GET"
                     // ? query parameter or variable 
127.0.O.1:S500/form.html?
                                 // site name
https://www.google.com/search?q=tutor+joes&oqTuto EgZja HJvbWUqCg                                          // 2 variable

attri - name works in image (URL)

name attri inputku eathukku? naa eathuku indha input.. sollum MUST

Attributes:

• action: URL where the form data is sent.
• method: Defines how data is sent (GET or POST).

2. HTML Form Attributes

Form attributes define behavior and appearance.

✅ Example: Target Attribute (_blank)

action="submit.php" method="POST" target="_blank">
     type="text" name="username">
     type="submit">Submit

1. HTML Form Elements

Common form elements include inputs, buttons, checkboxes, etc.

✅ Example: Form Elements

for="email">Email:
     type="email" id="email" name="email">

     for="message">Message:
     id="message" name="message">

     type="submit">Send

1. HTML Input Types

The tag has different types for different purposes.

✅ Example: Input Types

type="text" placeholder="Enter your name">
     type="password" placeholder="Enter password">
     type="email" placeholder="Enter your email">
     type="number" placeholder="Enter your age">
     type="checkbox"> I agree
     type="submit">Submit

1. HTML Input Attributes

Input fields have attributes that control behavior.

✅ Example: Input Attributes

type="text" placeholder="Enter your name" required>
 type="password" placeholder="Enter password" maxlength="10">
 type="number" min="18" max="99">
 type="text" pattern="[A-Za-z]+" title="Only letters allowed">

1. Input Form Attributes (Applied to
   and )

✅ Example: Autofocus & Datalist

type="text" placeholder="Your name" autofocus>

     list="browsers" name="browser">
     id="browsers">
         value="Chrome">
         value="Firefox">
         value="Edge">
    

     type="submit">Submit

🔥 Advanced Features

✅ Grouping with

Personal Info
         for="name">Name:
         type="text" id="name">

✅ File Uploads

type="file">
 type="file" multiple>

✅ Radio Button (Choose One Option)

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

✅ Checkbox (Choose Multiple)

type="checkbox" name="hobby" value="reading"> Reading
 type="checkbox" name="hobby" value="travel"> Travel

✅ Dropdown Select ()

value="html">HTML
     value="css">CSS
     value="js">JavaScript

✅ Form Validation

type="text" placeholder="Enter name" required>
     type="password" placeholder="Min 6 chars" minlength="6">
     type="text" pattern="[A-Za-z]+" title="Only letters allowed">
     type="submit">Submit

🎯 Summary

✅ Forms: Used to collect user input.

✅ Form Attributes: action, method, target, etc.

✅ Form Elements: , , , , etc.

✅ Input Types: text, password, email, file, checkbox, radio, etc.

✅ Input Attributes: required, maxlength, pattern, readonly, etc.

✅ Advanced Features: File upload, form validation, fieldset, legend.

This guide covers everything from basics to advanced! 💯

This guide covers everything from basics to advanced! 💯

📖 HTML Block vs Inline vs Inline-Block Elements

1️⃣ Block Elements

In HTML, elements are categorized into three main types based on how they behave in a web page:

2️⃣ Inline Elements

3️⃣ Inline-Block Elements

1️⃣ Block Elements

• Block elements always start on a new line and take up the full width available.

- They automatically push the next element to a new line.

📝 Key Points about Block Elements

✔ Start on a new line.

✔ Take the full width of their parent container.

✔ Can contain both inline and other block elements.

📌 Examples of Block Elements:

• (Paragraph)

• to
  (Headings)
• and
  (Lists)

-

,

, , etc.

🖼️ Block Element Example (Visual)


⛶

This is a paragraph.
This is another paragraph.

🔍 How it appears:

🟦 This is a paragraph.

🟦 This is another paragraph. (Starts on a new line)

---

2️⃣ Inline Elements

• Inline elements do not start on a new line and only take up as much width as needed.
• They do not push the next element to a new line.

📝 Key Points about Inline Elements

✔ Stay inside the same line.

✔ Take up only as much width as required.

✔ Cannot contain block elements inside them.

📌 Examples of Inline Elements:

• (Links)
• (Bold)
• (Italic)

- (Images)

🖼️ Inline Element Example (Visual)


⛶

This is a highlighted word.

🔍 How it appears:

🟦 This is a highlighted word. (No new line, stays in the same sentence)

---

3️⃣ Inline-Block Elements

• Inline-block elements behave like inline elements, but you can set width and height like block elements.

📝 Key Points about Inline-Block Elements

✔ Stay in the same line.

✔ Allow setting width and height.

✔ Do not take full width.

📌 Examples of Inline-Block Elements:

• (Even though is inline, it behaves like inline-block)

🖼️ Inline-Block Element Example (Visual)


⛶

style="width: 100px; height: 50px;">Click Me

🔍 How it appears:

🟥 Click Me (Width and height applied, but it stays inline)

---

🚀 Quick Comparison Table

Feature	Block	Inline	Inline-Block
Starts on a new line?	✅ Yes	❌ No	❌ No
Takes full width?	✅ Yes	❌ No	❌ No
Can set width/height?	✅ Yes	❌ No	✅ Yes
Example	, ,	, ,	, ,

---

✨ Summary

• Block elements take full width and start on a new line.
• Inline elements stay in the same line and only take necessary space.
• Inline-block elements behave like inline but allow width and height adjustments.