Related Topics
CSS
HTML
<form action="/submit-form" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<button type="submit">Submit</button>
</form>
In this example, the name attribute is used to specify the names of the input controls ("username" and "password") that will be sent to the server when the form is submitted. When the user enters a value into the text input or password input fields and submits the form, the data is sent to the server as key-value pairs, like this:
username=johndoe&password=secretpassword
The server can then use these key-value pairs to process the form data and perform any necessary actions, such as creating a new user account or logging the user in.
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone">
</fieldset>
<fieldset>
<legend>Shipping Address</legend>
<label for="address">Address:</label>
<input type="text" id="address" name="address">
<label for="city">City:</label>
<input type="text" id="city" name="city">
<label for="state">State:</label>
<input type="text" id="state" name="state">
<label for="zip">Zip:</label>
<input type="text" id="zip" name="zip">
</fieldset>
<button type="submit">Submit</button>
</form>
In this example, two <fieldset> elements are used to group related form fields together: one for personal information and one for shipping address. The <legend> element is used to provide a descriptive caption for each group.
When the form is submitted, the data from all the input fields is sent to the server as key-value pairs, just like in a regular form. However, by grouping related fields together, you can make the form easier to understand and use, and improve the overall user experience.
<label for="username">Username:</label>
<input type="text" id="username" name="username" value="johndoe">
In this example, the initial value of the text input field is set to "johndoe". When the user loads the page, they will see the text input field with the value "johndoe" already filled in.
Similarly, in a checkbox or radio button, the value attribute is used to specify the value that should be sent to the server if the checkbox or radio button is selected:
<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
In this example, if the user selects the checkbox, the value "yes" will be sent to the server as part of the form submission.
The value attribute can also be used with dropdowns to specify the default selected value:
<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca" selected>Canada</option>
<option value="mx">Mexico</option>
</select>
In this example, the value attribute is used to set the value of each option, and the selected attribute is used to specify the default selected option (in this case, "Canada").
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit" name="submitType" value="save">Save</button>
<button type="submit" name="submitType" value="submit">Submit</button>
</form>
In this example, there are two submit buttons: “Save” and “Submit”. Both buttons have the type="submit" attribute, so they will submit the form when clicked. Each button also has a different name attribute (submitType), but they share the same value attribute (save and submit). This allows you to differentiate which button was clicked in your server-side code by checking the value of the submitType parameter.
When the user clicks the “Save” button, the form data will be submitted to the server with submitType=save as part of the form data. Similarly, when the user clicks the “Submit” button, the form data will be submitted to the server with submitType=submit.
You can handle each type of submit action differently on the server-side based on the value of the submitType parameter.
<label for="name">Name:</label>
<input type="text" id="name" name="name" value="John Doe">
In this example, the value attribute is set to “John Doe”. When the form is loaded, the text input field will contain the default value “John Doe”. The user can modify this value as needed, and the modified value will be submitted when the form is submitted.
Note that the value attribute can also be used with other types of input fields, such as checkboxes, radio buttons, and select dropdowns. The default value will be pre-selected or pre-checked when the form is loaded.
Popular Category
Topics for You
CSS
Go through our study material. Your Job is awaiting.