Site icon Code Exercise

Web Forms HTML5 – HTML Development

Md Rashidul Islam

Web Forms html5 is same as html5 forms. we are explain html5 more form attribute and elements. If you follow this post i hope you are get about html5 forms.

Web Forms HTML5:

No doubt you interact with at least one form on the Web every day. Whether you’re searching for content or logging in to your e-mail account or Facebook page, using online forms is one of the most common tasks performed on the Web. As designers and developers, creating forms has a certain monotony about it, particularly writing validation scripts for them. HTML5 introduces a number of new attributes, input types, and other elements for your markup toolkit.

As you’ll see, These new features will a long way toward making our lives easier while delivering a delightful user experince. the best thing about all this? You can Start ussing them now.

A history of  Web Forms HTML5:

The forms section of HTML5 was originally a specification titled Web Forms 2.0 that added new types of controls for forms. Started by Opera and edited by then-Opera employee Ian Hickson, it was submitted to the W3C in early 2005. The work was initially carried out under the W3C. It was then combined with the Web Applications 1.0 specification to create the basis of the breakaway Web Hypertext Application Technology Working Group (WHATWG) HTML5 specification.

Web Form HTML5 Attributes:

There are 14 new Web forms html5 attributes that we’ll be following form elements.

The placeholder attribute on <input> and <textarea> elements provides a hint to the user of what can be entered in the field. The placeholder text must not contain carriage returns or line-feeds.

Syntax: <input name="placename" placeholder="text">

Note: The placeholder attribute works with the following input types: text, search, tel, url, email, and password.

HTML5 form input autocomplete attribute specifies whether or not an input field should have autocomplete enabled.

HTML5 form input text Autocomplete allows the browser to predict the value. When a user starts in a field to type, based on earlier typed values, to fill the browser should display options in the field.

Syntax: <input type="text" name="field_name" id="field_code" autocomplete="off">

Note: HTML5 form input text autocomplete attribute works with the following <input> types: text,  url, tel, search, datepickers, range, color, email andpassword.

The autofocus attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form item in a document can have the autofocus attribute, which is a Boolean. This attribute can be applied to the <input>, <button>, <select>, and <textarea> elements. The exception is that autofocus cannot be applied to an autofocus element if the type attribute is set to hidden (that is, you cannot automatically set focus to a hidden control).

Syntax:<input type="text" name="field-name" id="field-name" autofocus>

Note: The HTML5 autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.

The required attribute is a boolean attribute.

Syntax: <input id="field-name" name="field-name" required="" type="text" />

Note: The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.

<label>Your favorite fruit:
<datalist id="fruits">
  <select name="fruits">
    <option value="Blackberry">Blackberry</option>
    <option value="Blackcurrant">Blackcurrant</option>
    <option value="Blueberry">Blueberry</option>
    <!-- … -->
  </select>
If other, please specify:
</datalist>
  <input type="text" name="fruit" list="fruits">
</label>
<label>Product Number:
<input pattern="[0-9][A-Z]{3}" name="product"type="text" title="Single digit followed by three uppercase letters."/>
</label>
<label>Upload files:
<input type="file" multiple name="upload"></label>
<form action="process.php">
  <label for="email">Email:</label>
  <input type="text" name="email"value="gordo@example.com">
  <input type="submit" formnovalidate value="Submit">
</form>
<form action="process.php" novalidate>
  <label for="email">Email:</label>
  <input type="text" name="email"value="gordo@example.com">
  <input type="submit" value="Submit">
</form>
<input type="button" name="sort-l-h" form="sort">
<input type="submit" value="Submit"formenctype="application/x-www-form-urlencoded">
<input type="submit" value="Submit"formaction="process.php">
<input type="submit" value="Submit" formtarget="_self">
<input type="submit" value="Submit" formmethod="POST">

Create Form html5 -Sample/Exemplar Code :

<form action="" method="post">
    <fieldset>
        <legend>Booking Details</legend>
        <div>
            <label for="name">Name (required):</label>
            <input type="text" id="name" name="name" value="" aria-describedby="name-format">
            <span id="name-format" class="help">Format: firstname lastname</span>
        </div>
        <div>
            <label for="email">Email (required):</label>
            <input type="text" id="email" name="email" value="">
        </div>
        <div>
            <label>Website:</label>
            <input type="text" id="website" name="website" value="">
        </div>
        <div>
            <label for="numTickets"><abbr title="Number">No.</abbr> of Tickets (required):</label>
            <input type="text" id="numTickets" name="numTickets" value="">
        </div>
        <div class="submit">
            <input type="submit" value="Submit">
        </div>
    </fieldset>
</form>

Form Attributes Summary:

We’ve looked at several new form attributes that help improve user experience and save you development time. There are some more new attributes to discuss, which are covered together with HTML5’s new input types in the next article in this series.

You can find a dummy form, using some of the examples we’ve shown in this article at our HTML forms  page.

Exit mobile version