Quick Contact

    HTML Styles

    Introduction

    HTML Forms are necessary to gather many types of user inputs, such as contact information such as name, email address, phone numbers, or financial information such as credit card information, etc.

    Forms include controls such as input boxes, checkboxes, radiobuttons, submit buttons, and so on. In generally, users finish a form by updating its controls, such as inputting text, selecting items, and so on, and then submitting the form to a web server for further processing.

    To build an HTML form, use the < form> element. Here’s an example of a simple login form:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < title>Simple HTML Form< /title>
    < /head>
    < body>
    < form action="/examples/actions/confirmation.php" method="post">
    < label>Username: < input type="text" name="username">< /label>
    < label>Password: < input type="password" name="userpass">< /label>
    < input type="submit" value="Submit">
    < /form>
    < /body>
    < /html>
    

    Output

    Types of controls

    This section that follows discusses the various sorts of controls that we may are using in the form.

    Input Element

    This is the most consistent theme found in HTML forms.

    According to the type parameter, users can define different sorts of user input fields. A text field, password field, checkbox, radio button, submit button, reset button, file choose box, and various additional input types introduced in HTML5 can all be used as input elements.

    The most often used input types are listed below.

    Text Fields

    Text fields are one-line locations where the user can enter text.

    An < input> element with the type property text is used to construct single-line text input interfaces. Here’s an example of a single-line text entry used to collect user information:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < title>HTML Text Input Field< /title>
    < /head>
    < body>
    < form>
    < label for="user-name">Username:< /label>
    < input type="text" name="username" id="user-name">
    < /form>
    < /body>
    < /html>
    

    Output

    Note:

    The < label> tag is used to define the labels for < input> elements. If you want your user to enter several lines you should use a < textarea> instead.

    Password Field

    Text fields are comparable to passwords fields. The main difference is that characters in a password field are disguised, displaying as asterisks or dots. This is done to prevent others from reading the password shown on the screen. This is also a single-line text input control constructed using an < input> element and a password type property.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < title>HTML Password Input Field< /title>
    < /head>
    < body>
    < form>
    < label for="user-pwd">Password:< /label>
    < input type="password" name="user-password" id="user-pwd">
    < /form>
    < /body>
    < /html>
    

    Output

    Radio Buttons

    Radio buttons allow the user to pick only one choice from a predefined set of options. It is made up of an < input> element with the type property set to radio.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < title>HTML Radio Buttons< /title>
    < /head>
    < body>
    < form>
    < input type="radio" name="gender" value="male" id="male">
    < label for="male">Male< /label>
    < input type="radio" name="gender" value="female" id="female">
    < label for="female">Female< /label>
    < /form>
    < /body>
    < /html>
    

    Output

    Checkboxes

    Checkboxes enable the user to choose one or more choices from a predefined list. It is made up of an < input> element with the type property set to checkbox.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < title>HTML Checkboxes< /title>
    < /head>
    < body>
    < form>
    < p>< b>Choose Country< /b>< /p>
    < input type="checkbox" name="India" value="India" id="India">
    < label for="India">India< /label>
    < input type="checkbox" name="USA" value="USA" id="USA">
    < label for="USA">USA< /label>
    < input type="checkbox" name="Japan" value="Japan" id="Japan">
    < label for="Japan">Japan< /label>
    < /form>
    < /body>
    < /html>
    

    Output

    File Select box

    The file fields enable the user to look for a local file as well as connect it to the form data. Web browsers such as Google Chrome and Firefox display a file choose input box with a Browse button that allows the user to travel to and select a file from the local hard drive.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < title>HTML File Select box< /title>
    < /head>
    < body>
    < form>
    < label for="file-select">Upload:< /label>
    < input type="file" name="upload" id="file-select">
    < /form>
    < /body>
    < /html>
    

    Output

    Textarea

    The textarea controls is a multi-line text input control that allows the user to enter more than one line of text. A < textarea> element is used to construct multi-line text input controls.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < title>HTML Textarea< /title>
    < /head>
    < body>
    	< form>
    < label for="address">Address:< /label>
    < textarea rows="4" cols="40" name="address" id="address">< /textarea>
    < /form>
    < /body>
    < /html>
    

    Output

    Select Boxes

    A choose box is a dropdown list of options that allows the user to choose one or more alternatives from a pull-down menu. The < choose> and < option> elements are used to build a select box.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < title>HTML Select Box< /title>
    < /head>
    < body>
    < form>
    < label for="city">City:< /label>
    < select name="city" id="city">
    < option value="Delhi">Dehi< /option>
    < option value="Mumbai">Mumbai< /option>
    < option value="Chennai">Chennai< /option>
    	< option value="Banglore">Banglore< /option>
    < /select>
    < /form>
    < /body>
    < /html>
    

    Output

    Submit and Reset Buttons

    The form data is sent to a web server through a submit button. Whenever the submit button is pressed, the form data is transferred to the file specified in the form’s action property to be processed.

    A reset button returns all form controls to their default settings.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < title>HTML Submit and Reset Buttons< /title>
    < /head>
    < body>
    	< form action="/examples/html/action.php" method="post">
    < label for="first-name">First Name:< /label>
    < input type="text" name="first-name" id="first-name">
    < input type="submit" value="Submit">
    < input type="reset" value="Reset">
    < /form>
    < /body>
    < /html>
    

    Output

    Most Frequently Used Form Attributes

    The following table lists the most frequently used form element’s attributes:

    Attribute Description
    name The description of the form is specified.
    action Specifies the URL of the web server application or script that will be used to process the information given through form.
    method Specifies the HTTP method utilized by the browser to communicate data to the web server. The value can be either get (which is the default) or post.
    target Defines where its response obtained after submitting the form should be displayed. _blank, _self, _parent, and _top are all valid values.
    enctype When submitting the form to the server, this property specifies how the form data should be encoded. Only applies when the method attribute value is post.

    FAQS

    Q1. What is form tag in HTML?

    The HTML < form> element is used to create a user input form. A form may have textfields, checkboxes, radio buttons, and other elements. Forms are used to send user information to a certain URL.

    Q2. How many types of HTML are there?

    HTML is classified into three types: transitional, strict, and frameset. The most popular version of HTML is transitional, whereas strict HTML is intended to return rules to HTML and make it more dependable. Web developers may use Frameset to build a grouping of HTML documents as well as a menu system.

    Q3. What are the 4 attributes of form tag?

    Some of them are listed below:

    Action Attribute: –

    This is used to send the data to the server after the submission of the form.

    Method: –

    This is used to upload the data by using two methods that are Get and Post.

    Get Method: –

    It has a limited length of characters of URL.

    Enctype attribute: –

    This attribute is used to specify that how a browser decodes the data before it sends it to the server.

    Q4. How secure is HTML?

    HTML security consists of three different security measures: HTML encryption to ensure web content cannot be accessed by unauthorized users. The use of digital certificates to validate a domain and ensure content is coming from a trusted location (the URL in the browser address bar).

    Copyright 1999- Ducat Creative, All rights reserved.

    Anda bisa mendapatkan server slot online resmi dan terpercaya tentu saja di sini. Sebagai salah satu provider yang menyediakan banyak pilihan permainan.