Welcome to our BMR AI CHATBOT.
A free expermental AI tool where you can interact with the webpage, ask question about the webpage and other related doubts.
In some cases reponses may take time to get. In case of error give us your report.
You responses are stored for experimental purpuses. And your personal info is not integrated with you in any way.
Note: AI can make mistakes and can give in appropiate responses. Your feedbak will help us improve.
Stay tuned for more AI products and tools
And Finally don't forget to give your feedback. click on the icon provided to give feedback.
Used to create a form for user inputs.
It's a crucial part of web development as they allow users to input data and interact with web pages.
Forms are used for various purposes, such as submitting information, performing searches, and collecting user data.
They typically consist of input fields, buttons, and other form elements that enable users to enter and submit data to a server for processing.
<!DOCTYPE html>
<html>
<head>
<title>Sample Form</title>
</head>
<body>
<h2>Contact Us</h2>
<form action="/submit_form.php" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<input type="submit" value="Submit" />
</form>
</body>
</html>
There are some elements used in forms
Input Element
Description
Example
<label>
Used to associate a label with an input element, such as <input>, <textarea>, <select>, or other form elements
Syntax: <label for="input_id">Label Text</label>
<textarea>
A multi-line text input area that allows users to enter longer text or comments
Syntax: <textarea name="comments" rows="4" cols="50"></textarea>
<select>
Creates a drop-down list of options from which users can select one or more items. Inside <select>, you use <option> elements to define the individual selectable items.
Syntax: <select name="country"> <option value="USA">United States</option> </select>
<datalist>
Defines a list of predefined options for an <input> element with the list attribute
Syntax: <datalist id="fruits"><option value="Apple"><option value="Banana"></datalist>
<output>
Represents the result of a calculation or a user action. It is often used in combination with JavaScript to display computed values or responses
Syntax: <output name="result"></output>
<option>
Defines an option within a <select> element or a <datalist>
Syntax: <select name="city"><option value="New York">New York</option><option value="Los Angeles">Los Angeles</option></select>
<button>
A clickable button that can perform various actions, such as triggering JavaScript functions or submitting a form
Syntax:
<button type="button" onclick="alert('Hello!')">Click me</button>
<fieldset> and <legend>
Used to group related form elements together, with the <legend> providing a caption for the fieldset.
Syntax: <fieldset> <legend>Contact Information</legend> </fieldset>
<optgroup>
Groups related options within a <select> element
Syntax: <optgroup label="Citrus"><option value="Orange">Orange</option></optgroup>
Let's learn about input element seperately.
The HTML <input> element is a versatile form control that allows users to input data on a web page.
It is used to create various types of form fields, such as text fields, checkboxes, radio buttons, buttons, and more.
The appearance and behavior of the input element can vary depending on the type attribute you assign to it.
Syntax: <input type="..." name="..." value="..." />
<!DOCTYPE html>
<html>
<head>
<title>Text input type</title>
</head>
<body>
<h2>Contact Us</h2>
<form action="/submit_form.php" method="POST">
<label for="text">Name:</label>
<input type="text" id="text" name="text" />
</form>
</body>
</html>
The default value of the type attribute is "text"
Here are the input types
Input Type
Description
Example
text
Creates a single-line text input field for users to enter plain text
Syntax: <input type="text"/>
password
Creates a password input field that masks the characters entered for security
Syntax: <input type="password"/>
Provides an input field specifically designed for entering email addresses with built-in email validation
Syntax: <input type="email"/>
checkbox
Creates a checkbox that allows users to select one or more options from a list
Syntax: <input type="checkbox"/>
radio
Creates a set of radio buttons that allow users to select only one option from a list
Syntax: <input type="radio"/>
tel
Creates a field that is specifically designed for entering telephone numbers
Syntax: <input type="tel" name="phoneNumber">
image
Creates a clickable image that acts as a submit button within a form
Syntax: <input type="image" src="image_path.png" alt="Image Description" name="submitImage">
submit
Creates a button that, when clicked, submits the form data to the server for processing
Syntax: <input type="submit"/>
reset
Creates a button that, when clicked, resets the form fields to their default values
Syntax: <input type="reset"/>
file
Creates a file input field that allows users to upload files from their local system
Syntax: <input type="file"/>
week
used to allow users to select a specific week within a calendar month
Syntax: <input type="week"/>
month
Creates a field for entering only the month and year, without specifying a specific day
Syntax: <input type="month" name="monthInput">
search
create a field that is specifically designed for entering search queries
Syntax: <input type="search" name="searchQuery">
url
Used for entering website URLs. Some browsers provide URL validation for this input type
Syntax: <input type="url"/>
Range
Creates a slider control to select a value within a specified range
Syntax: <input type="range"/>
button
A generic button that can be used for JavaScript interactions
Syntax: <input type="button"/>
hidden
Hides the input field from the user but can store data used by scripts
Syntax: <input type="hidden"/>
datetime-local
Creates a field for entering both date and time values, with the time displayed in a 24-hour format
Syntax: <input type="datetime-local" name="dateTimeInput">
<!DOCTYPE html>
<html>
<head>
<title>Sample Form</title>
</head>
<body>
<h2>Registration Form</h2>
<form action="/submit_form.php" method="POST">
<label for="full_name">Full Name:</label>
<input type="text" id="full_name" name="full_name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female" required>
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other" required>
<label for="other">Other</label>
<br>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
<option value="australia">Australia</option>
<option value="other">Other</option>
</select>
<br>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now