Tuesday, January 1, 2019
PRACTICAL STEPS ON CREATING SEARCH BOX AND OTHER FORMS ON A WEB PAGE
Hi, I welcome you to our last lesson on HTML 5 and I’m glad we’re finishing strong. In this lesson, I will teach you how to create a search box and a few other HTML 5 simple forms on a web page. Some of the features we will be using here are entirely strange but not unconnected HTML5. So don’t get twisted. As we progress (especially when we get to CSS, PHP and Java) you will understand better. At the moment, just open your mind to the following explanations.
1. CREATING A SEARCH BOX WITH ‘SUBMIT’ BUTTON
Creating a search box in a website using HTML 5 is very easy. To make it look more beautiful, you can as well add CSS, PHP and/or JavaScript.
Let us consider a simple example for more clarification
So open your text editor and key in the following codes
<input id="mysearch" name="searchitem"
placeholder="search" type="search" />
<input type="submit" name="submit" /></input>
<button type="submit">search</button>
It will look like this
Save and open it. it will look exactly like this
EXPLANATION
a) ‘id’ is used for reference in JavaScript. (I will explain more when we get to Javascript)
b) ‘placeholder’ is a new feature in HTML5 and it is used to hint the user on what is expected to enter in the field.
c) ‘name’ is used when you submit a form.
d) ‘search’ is the data to be submitted and this data is usually carried to another page.
e) ‘searchitem’ is simply the data you have typed in the search bar. All these will become clearer when we get to PHP and JavaScript.
2. ‘’YOUR NAME’’ FORM
To create ‘your name’ form, in HTML 5, you have to use the <form> element, the label element and also the importantly the input element. Let us consider the example below:
<form>
<label>Your Name</label>
<input id="user" name="username" type="text" />
</form>
(NOTE: <input> is a self-closing tag, that is why /> is used at the end of the input element.)
It will look like this in your text editor
Save and open it, it will look like this
3. ‘’ USERNAME AND PASSWORD’’ FORM
For ‘your name and password form’
Type the following
<form>
<label>Username</label>
<input id="user" name="username" type="text" />
<input id="user" name="password" type="number" />
<button><label>submit</label></button>
</form>
(NOTE: <button> tags is used to create a submission button.)
IT will look like this on your text editor
Save and open it, it will look like this
4. ‘’YOUR E-ADDRESS FORM’’
To create your ‘e-mail address form’
Kindly write the following codes below. I will explain later
<form>
<label for="e-mail">Your e-mail adress</label>
<input type="text" name="e-mail" placeholder="e-mail@example.com" />
</form>
It will look like this in your text editor
Save it and open it. it will look like this
NOTE ALSO THIS IMPORTANT EXAMPLE BELOW
Write the following codes on your text editor
<form autocomplete="on">
<label for="e-mail">Your e-mail address:</label>
<input name="e-mail" placeholder="e-mail@example.com" type="text" required />
<input type="submit" value="submit" />
</form>
It will appear like this on your text editor
Save and open it, it will look like this
EXPLANATION
a. ‘placeholder’ is a new feature in HTML5 and it is used to hint the user on what is expected to enter in the field.
b. ‘autocomplete’ is used to indicate whether the browser should automatically complete a value based on the previously entered value
c. ‘’required’’ is used to force the website visitor to fill in the value required.
WRAPPING UP
I believe you’ve learnt a lot of things in this lesson. Keep practising and don’t forget to share with your friends. We are moving to CSS in our next lesson.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment