HTML Form
An HTML form is used to collect information from a user, such as name, email, password, gender,
address, etc. The information can then be submitted to a server for processing.
1. <form> Tag
The <form> tag is the main container for all form controls.
Syntax
<form action="[Link]" method="post">
Important <form> attributes
Attribute Meaning Example
action Specifies where the form data will be sent action="[Link]"
method Specifies how data is sent method="get" and ‘post’
2. <input> Tag
The <input> tag creates different types of form controls.
Basic syntax
<input type="text" name="username">
The type attribute determines what kind of input control is displayed.
Important input types
1. Text box
Used to enter a single line of text.
<input type="text" name="fullname">
2. Password
Used for passwords. Characters are hidden.
<input type="password" name="password">
3. Radio button
Used when the user should select only one option from a group.
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
Important: Radio buttons must generally have the same name to form one group.
4. Checkbox
Used when the user can select multiple options.
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="music"> Music
5. Submit button
Submits the form.
<input type="submit" value="Submit">
6. Reset button
Resets the form fields to their initial values.
<input type="reset" value="Reset">
7. Button
Creates a normal button.
<input type="button" value="Click Me">
8. Email
Used to enter an email address.
<input type="email" name="email">
9. Number
Used to enter a number.
<input type="number" name="age">
10. Date
Creates a date input.
<input type="date" name="dob">
11. File
Allows the user to select a file.
<input type="file" name="photo">
Attribute Purpose Example
type Specifies type of input type="text"
name Gives a name to the input name="username"
value Specifies initial/submitted value value="India"
placeholder Displays a hint placeholder="Enter name"
size Specifies visible width of text input size="30"
maxlength Maximum number of characters maxlength="20"
minlength Minimum number of characters minlength="5"
required Makes input compulsory required
5. <textarea> Tag
Used for multiple lines of text, such as an address or feedback.
Syntax
<textarea name="address" rows="5" cols="30"> center your address </textarea>
Important attributes
Attribute Purpose
name Gives the textarea a name
rows Specifies visible number of rows
cols Specifies visible width
6. <select> Tag
Creates a drop-down list.
<select name="city">
<option value="delhi">Delhi</option>
<option value="mumbai">Mumbai</option>
<option value="chennai">Chennai</option>
</select>
<select> attributes
Attribute Purpose
name Gives a name to the list
size Number of visible options
multiple Allows multiple options
required Requires a selection
Difference between Radio Button and Checkbox in HTML
Radio Button Checkbox
Used when you can select only one option from a
Used when you can select one or more options.
group.
Created using <input type="radio">. Created using <input type="checkbox">.
Radio buttons in the same group use the same Checkboxes can have the same or different name
name. values.
Example: Select Gender or Payment Method. Example: Select Hobbies or Skills.
Difference between Submit and Reset in HTML
Submit Reset
Sends the form data to the server. Clears the entered data.
Uses <input type="submit"> or <button Uses <input type="reset"> or <button
type="submit">. type="reset">.
Usually triggers the form's action and method. Does not send data to the server.
Used when the user wants to save/send information. Used when the user wants to clear the form.
1. Inserting an Audio File
Use the <audio> tag:
<Audio controls=’controls’ autoplay=True loop=True width="400" height="300">
<source src="video.mp4" type="Audio/mp3">
</Audio>
<audio> → inserts an audio file.
controls → displays play, pause, volume, etc.
<source> → specifies the audio file.
src → gives the file name/path.
type → specifies the audio format.
autoplay → Starts playing the audio automatically
loop→ Repeats the audio continuously.