Form in HTML

M2-R5.1 ┬╖ Chapter 3: HTML Basics ┬╖ 3 min read

HTML FORM

ЁЯФ╣ What are HTML Forms?

HTML рдореЗрдВ Forms рдХрд╛ рдЙрдкрдпреЛрдЧ user рд╕реЗ input рдпрд╛ information collect рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред

Forms рдХреА рд╕рд╣рд╛рдпрддрд╛ рд╕реЗ user website рдХреЗ рд╕рд╛рде interact рдХрд░ рд╕рдХрддрд╛ рд╣реИред

HTML Forms рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрдИ рдЬрдЧрд╣ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рдЬреИрд╕реЗ:

  • Login Form
  • Registration Form
  • Search Form
  • Feedback Form
  • Contact Form

HTML рдореЗрдВ form рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП <form> tag рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред

ЁЯФ╣ BASIC STRUCTURE OF FORM

рдПрдХ basic HTML form рдореЗрдВ рдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд elements рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ:

ElementUse
<form>Form рдХреЛ define рдХрд░рддрд╛ рд╣реИред
<input>рдЕрд▓рдЧ-рдЕрд▓рдЧ рдкреНрд░рдХрд╛рд░ рдХреЗ input fields рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдЙрдкрдпреЛрдЧ рд╣реЛрддрд╛ рд╣реИред
<textarea>Multi-line text input рдХреЗ рд▓рд┐рдП рдЙрдкрдпреЛрдЧ рд╣реЛрддрд╛ рд╣реИред
<select>Dropdown list рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдЙрдкрдпреЛрдЧ рд╣реЛрддрд╛ рд╣реИред
<option>Dropdown рдореЗрдВ options define рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЙрдкрдпреЛрдЧ рд╣реЛрддрд╛ рд╣реИред
<button>Clickable button рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдЙрдкрдпреЛрдЧ рд╣реЛрддрд╛ рд╣реИред

Syntax

<form>

    Form Elements

</form>

ЁЯФ╣ 1. INPUT ELEMENT (<input>)

<input> HTML Form рдХрд╛ рд╕рдмрд╕реЗ important element рд╣реИред

рдЗрд╕рдХрд╛ рдЙрдкрдпреЛрдЧ user рд╕реЗ рдЕрд▓рдЧ-рдЕрд▓рдЧ рдкреНрд░рдХрд╛рд░ рдХрд╛ input рд▓реЗрдиреЗ рдХреЗ рд▓рд┐рдП рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред

<input> element рдХрд╛ appearance рдФрд░ рдХрд╛рдо рдЙрд╕рдХреЗ type attribute рдкрд░ depend рдХрд░рддрд╛ рд╣реИред

Syntax

<input type="text">

ЁЯФ╣ INPUT ELEMENT TYPES

<input> element рдореЗрдВ рдЕрд▓рдЧ-рдЕрд▓рдЧ type values рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред


Example

Name:
<input type="text">

<br><br>

Password:
<input type="password">

<br><br>

Email:
<input type="email">

ЁЯФ╣ USE OF RADIO BUTTON

Radio Button рдХрд╛ рдЙрдкрдпреЛрдЧ рддрдм рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ рдЬрдм user рдХреЛ рджрд┐рдП рдЧрдП рдХрдИ options рдореЗрдВ рд╕реЗ рдХреЗрд╡рд▓ рдПрдХ option select рдХрд░рдирд╛ рд╣реЛред

рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП Gender рдореЗрдВ рдПрдХ option select рдХрд░рдирд╛ред

Example

Gender:

<br>

Male
<input type="radio">

Female
<input type="radio">

рд▓реЗрдХрд┐рди рдпрджрд┐ рджреЛрдиреЛрдВ radio buttons рдХреЛ рдПрдХ рд╣реА group рдореЗрдВ рд░рдЦрдирд╛ рд╣реИ, рддреЛ рджреЛрдиреЛрдВ рдореЗрдВ same name attribute рджреЗрдирд╛ рдЖрд╡рд╢реНрдпрдХ рд╣реИред

Correct Example

Gender:

<br>

Male
<input type="radio" name="gender">

Female
<input type="radio" name="gender">

рдпрд╣рд╛рдБ рджреЛрдиреЛрдВ radio buttons рдХрд╛:

name = gender

рд╣реИред

рдЗрд╕рд▓рд┐рдП user рдПрдХ рд╕рдордп рдореЗрдВ рдХреЗрд╡рд▓ рдПрдХ option select рдХрд░ рд╕рдХрддрд╛ рд╣реИред

ЁЯУМ рдпрд╛рдж рд░рдЦреЗрдВ

Radio Button тЖТ рдПрдХ option select

ЁЯФ╣ USE OF CHECKBOX

Checkbox рдХрд╛ рдЙрдкрдпреЛрдЧ рддрдм рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ рдЬрдм user рдХреЛ рджрд┐рдП рдЧрдП options рдореЗрдВ рд╕реЗ рдПрдХ рдпрд╛ рдПрдХ рд╕реЗ рдЕрдзрд┐рдХ options select рдХрд░рдиреЗ рд╣реЛрдВред

рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП Hobbies рдореЗрдВ user multiple hobbies select рдХрд░ рд╕рдХрддрд╛ рд╣реИред

Example

Hobbies:

<br>

<input type="checkbox"> Reading Books

<br>

<input type="checkbox"> Cricket

<br>

<input type="checkbox"> Playing

рдЗрд╕рдореЗрдВ user:

  • Reading Books
  • Cricket
  • Playing

рдореЗрдВ рд╕реЗ рдПрдХ рдпрд╛ multiple options select рдХрд░ рд╕рдХрддрд╛ рд╣реИред

ЁЯФ╣ checked Attribute

рдпрджрд┐ рдХрд┐рд╕реА checkbox рдХреЛ webpage load рд╣реЛрддреЗ рд╕рдордп рдкрд╣рд▓реЗ рд╕реЗ selected/checked рд░рдЦрдирд╛ рд╣реЛ, рддреЛ checked attribute рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред

Example

<input type="checkbox" checked>
Reading Books

рдЗрд╕рдореЗрдВ webpage open рд╣реЛрддреЗ рд╣реА Reading Books checkbox selected рджрд┐рдЦрд╛рдИ рджреЗрдЧрд╛ред

ЁЯУМ рдпрд╛рдж рд░рдЦреЗрдВ

Checkbox тЖТ Multiple options select рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред

ЁЯФ╣ TEXTAREA TAG

<textarea> tag рдХрд╛ рдЙрдкрдпреЛрдЧ multi-line text input рд▓реЗрдиреЗ рдХреЗ рд▓рд┐рдП рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред

рдЬрдм user рдХреЛ рдПрдХ рд╕реЗ рдЕрдзрд┐рдХ lines рдореЗрдВ text рд▓рд┐рдЦрдирд╛ рд╣реЛ, рддрдм <textarea> рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред

рдЗрд╕рдХрд╛ рдЙрдкрдпреЛрдЧ рдЬреИрд╕реЗ:

  • Message
  • Comment
  • Feedback
  • Address

рд▓рд┐рдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред

Syntax

<textarea></textarea>

Example

<textarea>
</textarea>

ЁЯФ╣ Pre-filled Message

рдпрджрд┐ webpage load рд╣реЛрдиреЗ рдкрд░ <textarea> рдХреЗ рдЕрдВрджрд░ рдХреЛрдИ default/pre-filled message рджрд┐рдЦрд╛рдИ рджреЗрдирд╛ рд╣реЛ, рддреЛ рдЙрд╕реЗ opening рдФрд░ closing <textarea> tags рдХреЗ рдмреАрдЪ рд▓рд┐рдЦрд╛ рдЬрд╛рддрд╛ рд╣реИред

Example

<textarea>Enter your message here...</textarea>

рдЗрд╕рдореЗрдВ:

Enter your message here...

рдкрд╣рд▓реЗ рд╕реЗ textarea рдХреЗ рдЕрдВрджрд░ рджрд┐рдЦрд╛рдИ рджреЗрдЧрд╛ред

ЁЯФ╣ SELECT TAG

<select> tag рдХрд╛ рдЙрдкрдпреЛрдЧ HTML рдореЗрдВ dropdown list рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред

User dropdown list рдореЗрдВ рджрд┐рдП рдЧрдП options рдореЗрдВ рд╕реЗ option select рдХрд░ рд╕рдХрддрд╛ рд╣реИред

<select> рдХреЗ рдЕрдВрджрд░ options рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП <option> tag рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред

Syntax

<select>

    <option>Delhi</option>
    <option>Mumbai</option>
    <option>Kolkata</option>

</select>

Output Concept

Select City тЦ╝

Delhi
Mumbai
Kolkata

ЁЯФ╣ selected Attribute

рдпрджрд┐ dropdown рдореЗрдВ рдХрд┐рд╕реА particular option рдХреЛ default selected рд░рдЦрдирд╛ рд╣реЛ, рддреЛ <option> tag рдореЗрдВ selected attribute рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред

Example

<select name="fruit">

    <option selected>Apple</option>
    <option>Banana</option>
    <option>Cherry</option>

</select>

рдЗрд╕рдореЗрдВ webpage open рд╣реЛрдиреЗ рдкрд░ Apple рдкрд╣рд▓реЗ рд╕реЗ selected рджрд┐рдЦрд╛рдИ рджреЗрдЧрд╛ред

ЁЯФ╣ COMPLETE FORM EXAMPLE

рдиреАрдЪреЗ рдЕрд▓рдЧ-рдЕрд▓рдЧ form elements рдХреЛ рдПрдХ рд╕рд╛рде use рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИ:

<html>

<head>
    <title>Student Form</title>
</head>

<body>

    <form>

        Name:
        <input type="text">

        <br><br>

        Password:
        <input type="password">

        <br><br>

        Gender:

        <input type="radio" name="gender">
        Male

        <input type="radio" name="gender">
        Female

        <br><br>

        Hobbies:

        <input type="checkbox">
        Reading

        <input type="checkbox">
        Cricket

        <br><br>

        City:

        <select>
            <option selected>Delhi</option>
            <option>Mumbai</option>
            <option>Kolkata</option>
        </select>

        <br><br>

        Message:

        <br>

        <textarea>
Enter your message here...
        </textarea>

        <br><br>

        <input type="submit">

        <input type="reset">

    </form>

</body>

</html>

тнР QUICK REVISION

Element / AttributePurpose
<form>Form рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП
<input>User рд╕реЗ input рд▓реЗрдиреЗ рдХреЗ рд▓рд┐рдП
type="text"Text рд▓реЗрдиреЗ рдХреЗ рд▓рд┐рдП
type="password"Password рд▓реЗрдиреЗ рдХреЗ рд▓рд┐рдП
type="radio"рдХреЗрд╡рд▓ рдПрдХ option select рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП
type="checkbox"Multiple options select рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП
checkedCheckbox рдХреЛ default selected рд░рдЦрдиреЗ рдХреЗ рд▓рд┐рдП
<textarea>Multi-line text рд▓реЗрдиреЗ рдХреЗ рд▓рд┐рдП
<select>Dropdown рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП
<option>Dropdown option рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП
selectedOption рдХреЛ default selected рд░рдЦрдиреЗ рдХреЗ рд▓рд┐рдП
<button>Clickable button рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП
submitForm submit рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП
resetForm data reset рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП