HTML Submit Form – HTML Development

We are Explain HTML Forms. Through a simple contact form, we’ll see all the basic requirements to build HTML Forms. Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

What is html Form?

A web form, webform or HTML form on a web page allows a user to enter data that is sent for processing to a server. Forms can database forms or resemble paper because web users fill out the forms using radio buttons, checkboxes, reset, submit, or text fields.

For example, forms can be used to enter shipping  or can be used from a search engine to retrieve search results, or credit card data to order a product.

HTML Elements With Code

Forms can be made up of standard graphical user interface elements:

• HTML Text Input — a simple text box that allows input of a single line of text (an alternative, password, is used for security purposes, in which the character typed in are invisible or replaced by symbols such as *)

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

• HTML Radio — a radio button

<input type="radio">

• HTML File — a file select control for uploading a file

<input type="file" id="myFile" multiple size="50" onchange="myFunction()">

• HTML Reset — a reset button that, when activated, tells the browser to restore the values to their initial values.

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

• HTML Submit — a button that tells the browser to take action on the form (typically to send it to a server)

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

• HTML TextArea — much like the text input field except a textarea allows for multiple rows of data to be shown and entered

<textarea name="not" rows="10" cols="30">

• select — a drop-down list that displays a list of items a user can select from

<select name="dropdown">
<option value="html" selected>HTML</option>
<option value="php">PHP</option>
</select>

The sample image on the right shows most of these elements:

• a text box asking for your name
• a pair of radio buttons asking you to pick your sex
• a select box giving you a list of eye colors to choose from
• a pair of check boxes to click on if they apply to you
• a text area to describe your athletic ability
• a submit button to send it to the server

Not: These basic elements provide most common graphical user interface (GUI) elements, but not all.

HTML Submission

When data that has been entered into HTML forms is submitted, the names and values in the form elements are encoded and sent to the server in an HTTP request message using GET or POST. Historically, an email transport was also used. The default mime type, Internet media type application/x-www-form-urlencoded, is based on a very early version of the general URI percent-encoding rules, with a number of modifications such as newline normalization and changing spaces with “+” instead of “%20“. Another possible encoding, Internet media type multi-part /form-data, is also available and is common for POST-based file submissions.

Example HTML From Code:
This is a basic Example of a submit button, Reset button and single-line text input used to take first name and last name:

<form action="action.php" method="get/post">
 First name: <input type="text" name="firstname"><br>
 Last name: <input type="text" name="lastname"><br>
 <input type="reset" value="Reset"> or <input type="submit" value="Submit">
</form>

This will produce following result:

 

*******************************************

Full HTML Contact From for Example

This is Full HTML From for Example to Work of a submit button, Reset button, single-line text input used to take full name, email and Message :

<form action="/my-sending-form-page" method="post">
    <div>
        <label for="name">Full Name:</label>
        <input type="text" id="name" name="user_name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" name="user_email" />
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg" name="user_message"></textarea>
    </div>
    
    <div class="button">
        <button type="submit">Send Message</button>
    </div>
</form>

This will produce following result: