With this element your user can upload different files like pictures, documents...It's tag is "file".It is very used in webpages using PHP or ASP.
<input type="file" name="files" />
Monday, May 21, 2012
How to create reset and submit buttons
These 2 buttons allow our user to reset a form or to submit it.
The tag is "submit" and it will send the form to the specificied order "action".
<input type="submit" name="button" value="submit" action=""/>
This button will empty all the selected options and entered text in a form.We will use the tag "reset".
<input type="reset" name="button" value="reset"/>
Try it on your own, create a form, add these 2 buttons and see what happens in any internet explorer.
Submit
<input type="submit" name="button" value="submit" action=""/>
Reset
This button will empty all the selected options and entered text in a form.We will use the tag "reset".
<input type="reset" name="button" value="reset"/>
Try it on your own, create a form, add these 2 buttons and see what happens in any internet explorer.
How to create dropdown menus
It allows us to create a list of different options, that will not take as much space as creating a normal list.Dorpdown menus are usually used for large lists, as for example, to select a country.In order to create it we will use the <select name="selection"><select> and in between them we will type
<option value="">value</option> for each option that we want to introduce to our dropdown list.This element also has the "name" and "id" tags.
We can also add other attributes as:
Size:Defines the number of options that will appear on screen.
Multiple:When a dropdown menu is multiple, the user can select more than one option at the time by pressing the "control" button.
Selected:This is an attribute for the <option> tag.It indicates if an option is selected as default.
Let's take a look at this:
Favourite color:
<select name="selection">
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
</select>
And this will be our result:
Favourite color:
<option value="">value</option> for each option that we want to introduce to our dropdown list.This element also has the "name" and "id" tags.
We can also add other attributes as:
Size:Defines the number of options that will appear on screen.
Multiple:When a dropdown menu is multiple, the user can select more than one option at the time by pressing the "control" button.
Selected:This is an attribute for the <option> tag.It indicates if an option is selected as default.
Let's take a look at this:
Favourite color:
<select name="selection">
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
</select>
And this will be our result:
Favourite color:
Wednesday, May 16, 2012
Radiobuttons
This element allows our user to select from a series of options,with a selection-circle in front of it.By selecting an option, one that already was chosen get's deselected.The tag for radio buttons is:
<input type="radio" name="option" value="" />
In order to create a selection list, all the elements in it must have the same name and different values.
Radio buttons also have the attributes name, id, value and checked, which I explained in previous posts.
Example of a simple selection list:
Favorite color: <br/>
Red<input type="radio" name="option" value="red" /><br/>
Blue<input type="radio" name="option" value="blue" /><br/>
Green<input type="radio" name="option" value="Green" /><br/>
Favorite color:
Red
Blue
Green
<input type="radio" name="option" value="" />
In order to create a selection list, all the elements in it must have the same name and different values.
Radio buttons also have the attributes name, id, value and checked, which I explained in previous posts.
Example of a simple selection list:
Favorite color: <br/>
Red<input type="radio" name="option" value="red" /><br/>
Blue<input type="radio" name="option" value="blue" /><br/>
Green<input type="radio" name="option" value="Green" /><br/>
Favorite color:
Red
Blue
Green
Friday, May 11, 2012
How to create checkboxes in Html
This element allow us to create a box, which the user can define as checked or unchecked.Checkboxes are mostly used in forms, that want people to select something or to mark their preferences.The tag we will use this time is:<input type:="checkbox" name="checkbox" />
Beside the attributes name, id and value we can use checked to make a box appear marked as default.
Example:
Favourite color:
Red: Blue:
Beside the attributes name, id and value we can use checked to make a box appear marked as default.
Example:
Favourite color:
Red: Blue:
Thursday, May 10, 2012
How to create password fields
Password fields are very usefull for sites that require a registration and a password key for access.Everything the user types in here, will appear hidden in form of asterisks.In order to create a password field we will use the same tag as for regular text fields but instead of text, this time we will use the input type password.
So the tag will look like this:
<input type="password" name="password" id="password" />
So the tag will look like this:
<input type="password" name="password" id="password" />
Create Html text areas
These elements are used , when we want our user to wright a longer text.It allows us to define the number of lines and rows.The tag that we will employ is:<textarea></textarea>.
To define the length and width of our text area, we will use the following two attributes:
cols:Defines the number of columns.
rows:Defines the number of rows.
As the text fields in the previous post, this tag also posesses the name and id attributes.What we can not use for text areas is value, but we can add our text by typing it in between the <textarea> and </textarea> tags.
<html>
<head>
</head>
<body>
<textarea cols="30" rows="6" name="Example" id="Example">
Here goes our text
</textarea>
</body>
</html>
To define the length and width of our text area, we will use the following two attributes:
cols:Defines the number of columns.
rows:Defines the number of rows.
As the text fields in the previous post, this tag also posesses the name and id attributes.What we can not use for text areas is value, but we can add our text by typing it in between the <textarea> and </textarea> tags.
<html>
<head>
</head>
<body>
<textarea cols="30" rows="6" name="Example" id="Example">
Here goes our text
</textarea>
</body>
</html>
Wednesday, May 9, 2012
Html text fields
They possibly are the most used element in Html forms.The text fields allow us to request information from our users, which they can fill in by theirselves.The tag we will be using for this one is:
<input type="text" name="text" id="text" value=""/>
You may surely be wondering about the attributes name, id and value.I will give you a brief explanation:
name:This will be the name that we are giving our text field, it doesn't appear in the text field.
id:This is used in javascript.It gives the field a unique value on the whole website.
value:What you type between the quotes will appear in the text field, if you don't type anything, the field will appear empty.
There are also some more attributes you can add to Html text fields that are not obligatory:
disabled:As the name says by itself, the field is disabled.The user can't type any information in it.It is very used by websites that want you to fill in their fields one by one, so if you haven't filled in a field, the next one will be disabled.
maxlength:Gives the user a limit of characters to type in.
size:Defines the length of the text field in pixels.
Example of a form with all of the previous attributes:
<head></head>
<body>
<form>
<input type="text" name="Name" id="text" value="Name" /><br/><br/>
<input type="text" name="disabled" id="disabled" value="Disabled" disabled/><br/><br/>
<input type="text" name="maxlength" id="maxlength" value="8 characters max." maxlength="8"/><br/><br/>
<input type="text" name="size" id="size" value="This field has a length of 100" size="100"/>
</form>
</body>
</html>
Wednesday, May 2, 2012
How to create Html forms
Forms are a very used tool on all type of webpages.They are mostly employed to get
information of your users.
Forms are defined with the tags <form> and </form>.The first thing to know is what possible attributes this tag has.Here is a list:
name:will allow us to give the form a name.
method:Indicates the type of sending will be used.The 2 most common types are get and post.With get the information being sent will be visible in the navigation bar, meanwhile with post
they remain invisible.And that's why 90% of the forms use the post method.
action:indicates an action to realize when the user has sent the form, like for example another webpage.
<form name="form" method="post" action="send.html" />
In the next post I will explain you the different elements we can include in a form.
information of your users.
Forms are defined with the tags <form> and </form>.The first thing to know is what possible attributes this tag has.Here is a list:
name:will allow us to give the form a name.
method:Indicates the type of sending will be used.The 2 most common types are get and post.With get the information being sent will be visible in the navigation bar, meanwhile with post
they remain invisible.And that's why 90% of the forms use the post method.
action:indicates an action to realize when the user has sent the form, like for example another webpage.
<form name="form" method="post" action="send.html" />
In the next post I will explain you the different elements we can include in a form.
Link types
There are different types of links in Html.I will explain them one by one in the list below.
Internal links:Those, which will send the user to different parts, inside the same page.
Local links:Are directed to other page on the same website.
Remote links:Will send user to another website.
E-mail links:Allows your users to send you an e-mail to a wished address.
Links with files:Lets your user download files.
Are those, which navigate to different parts of the same Html page.
Let's we want to insert a link that directs the user to the bottom of the page.First we will type the following tag :
<a href"#down">Go down</a>
We can observe that after href, in between the quotes we have placed the name of a tag which we will create on the bottom of the page.This name will always be proceeded of the number sign #.
<a name="down"></a>
By inserting this 2 tags in our page we generate a link that redirects the user to the bottom of the page.
These links are used very commonly on all kind of websites.Every page with more than 1 Html document will need Local links.They allow us to navigate in different html files.To create such link we will apply the tag <a href="name of the archive.html">Anchor text</a>
Remote links
Email links allow users to contact with us per e-mail.We will employ the following tag for this one:
<a href="mailto:your@adress.com>Your adress.com</a>
This type of links allow the user to download any file we want them to do so.The format for this one is the same as a normal link with the exception that we introduce the name of the archive.zip .pdf .doc .xls.. instead of the address.
<a href="document.zip">Zip file </a>
Internal links:Those, which will send the user to different parts, inside the same page.
Local links:Are directed to other page on the same website.
Remote links:Will send user to another website.
E-mail links:Allows your users to send you an e-mail to a wished address.
Links with files:Lets your user download files.
Internal links
Are those, which navigate to different parts of the same Html page.
Let's we want to insert a link that directs the user to the bottom of the page.First we will type the following tag :
<a href"#down">Go down</a>
We can observe that after href, in between the quotes we have placed the name of a tag which we will create on the bottom of the page.This name will always be proceeded of the number sign #.
<a name="down"></a>
By inserting this 2 tags in our page we generate a link that redirects the user to the bottom of the page.
Local links
These links are used very commonly on all kind of websites.Every page with more than 1 Html document will need Local links.They allow us to navigate in different html files.To create such link we will apply the tag <a href="name of the archive.html">Anchor text</a>
Remote links
They are used to send the user to another webpage out of ours.They are very common on different pages of the same niche.The format of remote links will be the following:
<a href="name of the website">Text to be displayed</a>
E-mail links
Email links allow users to contact with us per e-mail.We will employ the following tag for this one:
<a href="mailto:your@adress.com>Your adress.com</a>
Links containing files
This type of links allow the user to download any file we want them to do so.The format for this one is the same as a normal link with the exception that we introduce the name of the archive.zip .pdf .doc .xls.. instead of the address.
<a href="document.zip">Zip file </a>
How to insert links on our page
Links are very important for web creating, because they will allow us to navigate through different Html pages on our website , link to extern pages or link to download archives.The tag we will employ this time is <a href=""></a>.In the inverted comas we will place the link wich we want to use.Between <a href=""> and </a>, we will insert the anchortext, the text we want to be shown instead of the link.
Let's create a link to Youtube.In your Html editor or notepad type the follwing:
<a href=" http://www.youtube.com/">Youtube</a>
This done, our result should look like this:
Let's create a link to Youtube.In your Html editor or notepad type the follwing:
<a href=" http://www.youtube.com/">Youtube</a>
This done, our result should look like this:
Tuesday, May 1, 2012
How to add images to Html.
The use of images in web-designing is very popular at the time.Introducing them into our Html website
isn't very difficult, you only have to remember that they must be in the formats GIF, JPEG or PNG.
The tag we will use this time is <img src="">.Now I will explain you some things you can do with your image:
- src: This will be obligatory if we want to upload an image to our website, because we will have to add the source of the image, so that our program can find it.
- align:Allows us to align our image on the website.We can use align="Top,Bottom,Left or Right".
- alt:This attribute accepst a text, which must describe our image well in order for search engine robots to know what exactly the image shows.
- width:With this one we will define the height of our image in Html in pixels.
- height:Allow us to define the height of our image, again in pixels.
- border:Here we can create a border, surrounding the image.You define the anchor of it with pixels.
Example: <img src="add your image's source here" alt="The description of the image here" width="200" height="200" border="1" align="right" />
isn't very difficult, you only have to remember that they must be in the formats GIF, JPEG or PNG.
The tag we will use this time is <img src="">.Now I will explain you some things you can do with your image:
- src: This will be obligatory if we want to upload an image to our website, because we will have to add the source of the image, so that our program can find it.
- align:Allows us to align our image on the website.We can use align="Top,Bottom,Left or Right".
- alt:This attribute accepst a text, which must describe our image well in order for search engine robots to know what exactly the image shows.
- width:With this one we will define the height of our image in Html in pixels.
- height:Allow us to define the height of our image, again in pixels.
- border:Here we can create a border, surrounding the image.You define the anchor of it with pixels.
Example: <img src="add your image's source here" alt="The description of the image here" width="200" height="200" border="1" align="right" />
Subscribe to:
Posts (Atom)