Ranjith srt

Posted on Mar 24

MERN - Html (Day 5)

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! 🚀

HTML Forms (<form>)

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

✅ Basic Form Example:

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

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.

Attribute	Description
`action`	URL to send form data.
`method`	How data is sent (`GET` or `POST`).
`target`	Where to open response (`_self`, `_blank`).
`autocomplete`	Enables/disables auto-fill (`on`/`off`).
`novalidate`	Disables browser validation.

✅ Example: Target Attribute (_blank)

<form action="submit.php" method="POST" target="_blank">
    <input type="text" name="username">
    <button type="submit">Submit</button>
</form>

HTML Form Elements

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

Element	Description
`<input>`	User input field.
`<label>`	Describes an input field.
`<textarea>`	Multi-line text input.
`<select>`	Dropdown menu.
`<option>`	Options inside `<select>`.
`<button>`	Clickable button.
`<fieldset>`	Groups form elements.
`<legend>`	Title for `<fieldset>`.

✅ Example: Form Elements

<form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>

    <button type="submit">Send</button>
</form>

HTML Input Types

The <input> tag has different types for different purposes.

Type	Description
`text`	Single-line text input.
`password`	Hides entered text.
`email`	Accepts only valid emails.
`number`	Only numbers allowed.
`tel`	Phone number input.
`checkbox`	Select multiple options.
`radio`	Select one option.
`file`	Upload files.
`date`	Date picker.
`range`	Slider input.

✅ Example: Input Types

<form>
    <input type="text" placeholder="Enter your name">
    <input type="password" placeholder="Enter password">
    <input type="email" placeholder="Enter your email">
    <input type="number" placeholder="Enter your age">
    <input type="checkbox"> I agree
    <button type="submit">Submit</button>
</form>

HTML Input Attributes

Input fields have attributes that control behavior.

Attribute	Description
`value`	Default value of input.
`placeholder`	Hint text inside input.
`readonly`	Cannot be edited.
`disabled`	Cannot be clicked/typed.
`required`	Must be filled before submitting.
`maxlength`	Limits input length.
`min & max`	Set value range for numbers.
`step`	Defines step size (for number, range).
`pattern`	Regular expression validation.

✅ Example: Input Attributes

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

Input Form Attributes (Applied to <form> and <input>)

Attribute	Description
`autofocus`	Input gets focus on page load.
`multiple`	Allows multiple file uploads.
`autocomplete`	Enables/disables auto-fill.
`list`	Links `<datalist>` to an input.

✅ Example: Autofocus & Datalist

<form>
    <input type="text" placeholder="Your name" autofocus>

    <input list="browsers" name="browser">
    <datalist id="browsers">
        <option value="Chrome">
        <option value="Firefox">
        <option value="Edge">
    </datalist>

    <button type="submit">Submit</button>
</form>

🔥 Advanced Features

✅ Grouping with <fieldset> and <legend>

<form>
    <fieldset>
        <legend>Personal Info</legend>
        <label for="name">Name:</label>
        <input type="text" id="name">
    </fieldset>
</form>

✅ File Uploads

<input type="file">
<input type="file" multiple>

✅ Radio Button (Choose One Option)

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

✅ Checkbox (Choose Multiple)

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

✅ Dropdown Select (<select>)

<select>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
</select>

✅ Form Validation

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

🎯 Summary

✅ Forms: Used to collect user input.

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

✅ Form Elements: <input>, <select>, <textarea>, <button>, 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! 💯

📖 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:

<div>
<p> (Paragraph)
<h1> to <h6> (Headings)
<ul> and <ol> (Lists)

- `<section>`, `<article>`, `<footer>`, etc.

🖼️ Block Element Example (Visual)

 <p>This is a paragraph.</p>
<p>This is another paragraph.</p>

🔍 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:

<span>
<a> (Links)
<strong> (Bold)
<em> (Italic)

- `<img>` (Images)

🖼️ Inline Element Example (Visual)


<p>This is a <span>highlighted</span> word.</p>

🔍 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:

<button>
<input>
<img> (Even though <img> is inline, it behaves like inline-block)

🖼️ Inline-Block Element Example (Visual)


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

🔍 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	`<p>`, `<div>`, `<h1>`	`<a>`, `<span>`, `<strong>`	`<button>`, `<input>`, `<img>`

✨ 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.