<!-- !

Forms -->

Forms in HTML

Forms in HTML are used to collect user information.

Forms are block-level elements, while most of the form elements inside them
are inline-level.

Tags Used in Forms:

1. <form>:
- It is a semantic element that defines the beginning of the form.
- It contains all the form-related elements.

Example:

<form action="/submit" method="post">

<!-- form elements go here -->
</form>

2. <label>:
- Specifies the purpose of the input field.
- It's linked to the <input> field using the for attribute, which matches the id
of the input element.

Example:

<label for="userName">Name:</label>
<input type="text" id="userName">

3. <input>:
- Used to collect user data.
- There are various types such as text, email, password, number, etc.

Example:

<input type="email" id="userEmail">

4. <select>:
- Creates a dropdown list from which users can select options.

Example:

<label for="skills">Skills:</label>
<select id="skills">
<option value="html">HTML</option>
<option value="css">CSS</option>
</select>

5. <option>:
- Defines the options within a dropdown list.

6. <fieldset>:
- Groups form elements together and provides a border around them.

Example:

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

7. <legend>:
- Provides a caption for the <fieldset> group.

8. <textarea>:
- Used to collect multi-line text input.
- The rows and cols attributes specify the visible height and width.

Example:

<textarea rows="5" cols="30"></textarea>

9. <button>:
- Creates a clickable button in the form. It can be used to submit or reset the
form based on the type attribute.

Example:

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

Attributes of the <form> Tag:

1. action: Specifies the URL where form data will be submitted.

Example:

<form action="/submit-data">

2. method: Specifies how the data is sent to the server (GET or POST).
- GET: Sends data in the URL, not secure.
- POST: Sends data securely in the HTTP body.

Example:

<form method="post">

3. autocomplete: Defines whether form inputs should have auto-complete

enabled (on or off).

Example:

<form autocomplete="on">
Attributes of the <input> Tag:

1. type: Specifies the type of input field (e.g., text, email, password, etc.).
2. id: Provides a unique identifier for the input element.
3. name: Associates a name with the input field, used for form submission.
4. value: Defines the initial value of the input field.
5. required: Makes the field mandatory to fill before submission.
6. readonly: Prevents users from modifying the input field value.
7. disabled: Disables the input field.
8. min, max, minlength, maxlength: Used to define the minimum and
maximum values or lengths for input.
9. placeholder: Displays a hint text inside the input field.

Values of type Attribute in HTML <input> Tag

The type attribute of the <input> tag in HTML determines the kind of input
field displayed on the webpage. Here are the common values of the type
attribute:

1. text:
- Allows users to enter regular text.
- Default input type.

Example:

<input type="text">

2. email:
- Used for email input. It automatically validates the input for an email
format.

Example:

<input type="email">
3. password:
- Displays input as masked characters (dots or asterisks), hiding the user's
input.

Example:

<input type="password">

4. number:
- Allows users to enter numerical values. It can have min, max, and step
attributes for validation.

Example:

<input type="number" min="1" max="100" step="1">

5. tel:
- Allows users to input telephone numbers. It doesn't enforce specific
validation but provides a numeric keyboard on mobile devices.

Example:

<input type="tel">

6. radio:
- Creates a radio button, allowing users to select one option from a group.

Example:

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

<input type="radio" name="gender" value="female"> Female
7. checkbox:
- Creates a checkbox, allowing users to select multiple options
independently.

Example:

<input type="checkbox" value="subscribe"> Subscribe

8. button:
- Creates a clickable button. Typically, you can use JavaScript to define what
happens when it’s clicked.

Example:

<input type="button" value="Click Me">

9. submit:
- Creates a submit button that submits the form data to the server.

Example:

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

10. reset:
- Resets all the form fields to their default values.

Example:

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

11. date:
- Allows users to select a date using a date picker.

Example:

<input type="date">

12. time:
- Allows users to select a time.

Example:

<input type="time">

13. week:
- Allows users to select a specific week in a year.

Example:

<input type="week">

14. month:
- Allows users to select a specific month and year.

Example:

<input type="month">

15. color:
- Allows users to select a color from a color picker.

Example:

<input type="color">
16. image:
- Creates a submit button in the form of an image.

Example:

<input type="image" src="submit.png" alt="Submit">

17. file:
- Allows users to upload files from their device.

Example:

<input type="file">

18. range:
- Creates a slider input that allows users to select a numeric value within a
specific range.

Example:

<input type="range" min="1" max="100">

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form in html</title>
</head>
<body>

<h1> Student Details</h1>

<form action="" autocomplete="off">

<fieldset>

<legend>student info</legend>

<label for="sn">Student Name</label>

<input type="text" id="sn" name="sname" placeholder="enter your name">
<br><br>

<label for="ph">phone number</label>

<input type="tel" name="sphno" id="ph" minlength="10"> <br> <br>

<label for="pass" >Password</label>

<input type="password" name="password" id="pass" maxlength="6"> <br>

<br>

<label for="age">student Age</label>

<input type="number" name="age" id="age" required><br> <br>

<label for="email">Student Email</label>

<input type="email" name="email" id="email"> <br> <br>

<label for="">Subjects</label> <br>

<input type="checkbox" name="sub1" id="html" value="html">

<label for="html">HTML</label>

<input type="checkbox" name="sub2" id="css" value="css">

<label for="css">CSS</label>
<input type="checkbox" name="sub3" id="js" value="js">
<label for="js">JS</label>

<br><br>
 <label for="dob">Date Of Birth</label>
<input type="date" name="dob" id="dob">
<br><br>

<label for="">Gender</label>
<input type="radio" name="gender" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="female">
<label for="female">Female</label>
<input type="radio" name="gender" id="others" value="others">
<label for="others">Others</label>

<br><br>

<label for="">Select the course</label>

<select name="course" id="">

<option value="javafullStack">Javafull stack</option>

<option value="pythonfullStack">python fullstack</option>
<option value="MERNstack">Mern stack</option>

</select>

<br><br>

<label for="add">Address</label> <br>

<textarea name="address" id="add" rows="10" cols="20"></textarea>

<br><br>

<label for="">Salary</label>
<input type="range" name="salary" id="" min="250000" max="400000000">

<br><br>

<button type="submit">SignUp</button>
<button type="reset">reset</button>

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

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

</fieldset>

</form>
</body>
</html>