Scribd
Upload
11 views3 pages

HTML Forms and Controls

This document provides an overview of HTML forms, including the <form> element and various form controls such as text inputs, radio buttons, checkboxes, dropdowns, textareas, and file uploads. It also includes a complete example of a form and highlights special HTML5 attributes like 'required' and 'placeholder'. The document serves as a guide for creating and managing user input in web applications.

Uploaded by

Meera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views3 pages

HTML Forms and Controls

This document provides an overview of HTML forms, including the <form> element and various form controls such as text inputs, radio buttons, checkboxes, dropdowns, textareas, and file uploads. It also includes a complete example of a form and highlights special HTML5 attributes like 'required' and 'placeholder'. The document serves as a guide for creating and managing user input in web applications.

Uploaded by

Meera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML Forms and Controls - Notes and Examples

1. The <form> Element

Forms in HTML are used to collect user input and send it to a server.

Syntax:

<form action="submit_form.php" method="post">

<!-- Form controls -->

</form>

2. Common Form Controls

- Text Input

<input type="text" name="username">

- Password Input

<input type="password" name="pwd">

- Radio Buttons

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

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

- Checkboxes

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

<input type="checkbox" name="hobby" value="travel"> Traveling

- Dropdown (Select)

<select name="country">

<option value="india">India</option>

<option value="usa">USA</option>

</select>

- Textarea

<textarea name="message" rows="4" cols="30"></textarea>

- File Upload

<input type="file" name="resume">


HTML Forms and Controls - Notes and Examples

- Submit & Reset Buttons

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

<input type="reset" value="Reset">

- Button with JavaScript

<button type="button" onclick="alert('Hello!')">Click Me</button>

3. Complete Example Form

<form action="submit_form.php" method="post">

Name: <input type="text" name="name"><br><br>

Password: <input type="password" name="pwd"><br><br>

Gender:

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

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

Hobbies:

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

<input type="checkbox" name="hobby" value="sports"> Sports <br><br>

Country:

<select name="country">

<option value="india">India</option>

<option value="usa">USA</option>

</select><br><br>

Message:<br>

<textarea name="message" rows="4" cols="30"></textarea><br><br>

Upload File: <input type="file" name="resume"><br><br>


HTML Forms and Controls - Notes and Examples

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

<input type="reset" value="Reset">

</form>

4. Special HTML5 Attributes

- required: Field must be filled

- placeholder: Hint text inside input

- maxlength: Maximum input length

- min and max: For numbers/dates

- pattern: Regex validation

Example:

<input type="email" name="email" required placeholder="Enter your email">

You might also like