HTML (HyperText Markup Language) is the primary and major web language, it is the first scripting language anyone who is aspiring to become a Web Designer or a Web Developer has to learn to excel in the web arena. HTML is the standard markup language used to create web pages. There are hundreds of powerful scripting languages and programming languages used in designing and developing the web and web applications, but all the languages are in one way or the other embedded into HTML or HTML embedded within the programming languages’ code.
HTML is the standard web language that all forms of web browser understand and can interpret without installing separate language translator on your web browser. Every web browser ranging from those on small featured phones to the smartest smart-phone in town, and all types of browsers on computers across all OS platforms. HTML is designed to format the output of your web page on browsers.
HTML was first conceived in 1980 by a Physicist Tim Bernee-Lee who was a contractor at CERN (European Organization for Nuclear Research). His idea was strongly influenced by the SGML guide (Standard Generalized Markup Language). The first set of HTML tags were described and publicly published by Bernee in 1991, ever since then HTML has witnessed a tremendous growth. The latest version is HTML 5, it was first published in 2008. The publication explicitly defined its own HTML serialization. This shows that HTML is breaking totally away from SGML and standing on its own. The past year 2014 was set for the release of full specification of HTML 5.
HTML Form
Form is defined as the shape, visual appearance, constitution or configuration of an object. In a simpler sense, the form is the way something is or the way something happens. Form can also be defined as a document with spaces in which to write or enter data either printed or electronic. An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, text field, text area etc.), and labels on those controls.
HTML documents are described by HTML tags and each HTML tag describes different document content. HTML tags normally come in pairs like <html> and </html>, the first tag in a pair is the start tag, the second tag is the end tag. The end tag is written like the start tag, but with a slash before the tag name. Every Tag described in HTML has element, each element has attribute it is identified with.
Form Elements
Form element: The FORM element acts as a container for controls. It specifies the form layout, the program that will handle the completed and submitted form, The method by which user data will be sent to the server and A character encoding that must be accepted by the server in order to handle this form.
Attributes of form element are: Action, Method, Enctype, Accept-charset, Name, Accept.
Input element: the INPUT element specifies the type of input the form is expected to accept from users through the input console or devices for processing. HTML 5 has added new tags to enhance the form design in HTML, some of them are; range, number, week, datetime, url, email, color etc.
Button element: The BUTTON element defines a clickable button. Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element. Always specify the type attribute for a <button> element. Different browsers use different default types for the <button> element.
Label element: The LABEL element defines a label for an input element. The <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control. The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together
Text field and Text area element: The Text area defines a multi-line text input control. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier). The size of a text area can be specified by the cols and rows attributes, or even better; through CSS (Cascading Style Sheet) height and width properties.
Text field defines a single line text input control, unlike text area the number of characters hold by text field are limited.
Select, Optgroup and Option element: The SELECT element is used to create a drop-down list. The <option> tags inside the <select> element define the available options in the list. HTML five added new features to the SELECT attributes. And also gives user the opportunity to select multiple options using the Multiple attribute.
SEE ALSO: SEO [Search Engine Optimization] Plugin For Blogger
The Elements given above are not the full lists of HTML form elements, these are common elements used often in forms and they are the elements I use in designing a simple form.
Form Design
Now let us write our HTML code to design a simple form. To achieve this simple form, the major tags used in this form are defined under the heading Form element above. The appearance of the form is styled with CSS, the CSS code is not included in the code below.
Simple HTML Form
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<title>Bizham</title>
</head>
<body>
<div id=”header”> <img src=”file:///D|/wamp/www/Bam_Eng/images/logo.png” alt=”logo” width=”217″ height=”50″ hspace=”15″ vspace=”15″>
<div id=”mian_con”>
<div align=”center”>
<h3>Rating Form</h3>
</div> <form name=”Form” method=”post” action=”validate_form.html”>
<p>Name: <input type=”text” name=”name” id=”name” autofocus placeholder=”First Name Last Name”>
Number: <input type=”tel” name=”telephone” id=”phone” placeholder=”tel: (+234)0908766638″></p>
<p>E-mail: <input type=”email” name=”email” id=”email” placeholder=”example@mail.com”></p>
<p align=”center”>Rate Us:</p>
<p>Content Quality:
Poor <input type=’range’ id=’rating’ min=’1′ max=’5′ value=’3′> Excellent</p>
<p>Content Message:
<select name=”select2″ id=”select2″>
<option selected>Select one</option>
<option>1 – Best</option>
<option>2 – Average</option>
<option>3 – Good</option>
<option>4 – Fair</option>
<option>5 – Poor</option>
</select> </p>
<p>Message Validity:
<select name=”select” id=”select”>
<option>Select percentage (%)</option>
<option>0%</option>
<option>25%</option>
<option>50%</option>
<option>75%</option>
<option>100%</option>
</select> </p>
<p> Comment </p>
<p> <textarea name=”comment box” cols=”40″ rows=”5″ wrap=”hard” id=”comment box” tabindex=”20″ title=”Comment”>
</textarea>
</p> <p align=”center”>
<input type=”submit” name=”submit” id=”submit” value=”Rate”>
<input type=”submit” name=”reset_button” id=”reset_button” value=”Reset”></p>
</form>
</div>
<div id=”aside”>
<p> WealthResult.com </p>
<p> The reliable site for top notch business tutorials, business ideas, reviews, investment guides, business news, and strategy for entrepreneurs. </p>
<p> Doing Business! </p>
</div> Business Strategy for Entrepreneurs </div>
</div>
</body>
</html>
Tags:
<p></p> = paragraph tag defines paragraph in an HTML document.
<div></div> = The <div> tag defines a division or a section in an HTML document.
<h></h> = heading tag, this tag range from <h1> to <h6>. The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading.
<src></src > = The source tag is used to specify multiple media resources for media elements, such as <video> and <audio>.
Attributes
HTML elements can have attributes, Attributes provide additional information about an element. Attributes are always specified in the start tag and all Attributes come in name/value pairs like: name=”value”. e.g < Input (input is an element) type=’text’ name=’reg_form required placeholder=’First Name’>
Input is the main element while name, placeholder, text field, required etc are the attributes of INPUT element.
Such an extremely valuable article, I might want to thank you for the endeavors you had made for writing this magnificent article. Extremely intriguing to read this article, I am very refreshing with it, this is fine to peruse and important genius potential, I truly bookmark it, expert widen read. Thank you for this professional sharing. I like it.