How to make an html form with fieldset tag

HTML Forms

HTML forms are used to pass data to a web server or mail server. We may want to give the form its own title and border. To do this we use the <fieldset> and <legend> tags to the HTML code: e.g. copy and past below code and see what it do for you.

<fieldset>
<legend>This is my form</legend>
      form code will go here.
</fieldset>

The HTML form tag

All the input elements should be enclosed within the opening and closing form tags this is form starting tag:

<form action="" method="post" name="first_form" enctype="multipart/form-data" onsubmit="validation()">

action='save.php'
The action attribute points to the server side script (‘back end’) that handles the form submission. Usually, this will be a script (PHP,ASP, Perl) or a CGI program. In other words the action is used to indicate the file name through which data is passed to the server. If you want to send data to a mail server you can write your email address after equal sign of action like this action=”your_email@yahoo.com” etc.
method ='get' or method = 'post'
If you use GET method, the form submission values are passed as part of the URL. If it is POST, the information is sent to the server as part of the data body and will not be visible in the address bar in the user’s browser. If you don’t specify the method, GET is taken by default.
name =”firstForm”
Form name is used for java script validation etc. you can see the java script validation of complete signup form here javascriptvalidation@yahoo.com.
enctype="multipart/form-data"
While creating a form with file upload support, do remember to add an attribute enctype=“multipart/form-data” in your

tag.

The form input elements

You can use different types of input elements in a form. Examples are: check boxes, radio buttons, text fields etc.

Text field

text field is used to collect the name, email, phone number etc from your web site visitors. Here is the code to create a simple text box:

<label for="email">Email:</label><input type="text" name="email" maxlength="50" value="" class="input"/>

label
Allows authors to assign a shorter label for the element, to be shown instead of the element's content as Email in above text field code example.
type=”text”
The ‘type’ attribute tells the browser that a single line text input box should be created.
name=”email”
Give a name to the field. The name is used to identify the field on the server side.
nvalue=””
The text you give as value will be displayed by default in the text box and this value will be pass to the server.
nvalue=””
The text you give as value will be displayed by default in the text box and this value will be pass to the server.
maxlength=”60”
Specifies the maximum number of characters the user can enter into this text box. Note that the default width of a text field is 50 characters.
class=”input”
class can have any name “input” is in this case, class name is used for css and java script you can see css of this form here cssoffrom@yahoo.com.

Password Text field

You can create a password field by using the input type =‘password’ e.g.

<label for="password" >Password:</label><input type="password" name="password" value=”123”/>

Note: The characters in a password field are masked (shown as asterisks or circles)

File Upload field

Use this field if you want to give an option to user for uploading file or picture.

<label for="file">Upload Your Picture:</label><input type="file" name="userfile" />

Note: Allowing users to upload files is a big security risk. Only permit trusted users to perform file uploads. See here how to upload a file to server. www.b2atutorials.com.

Hidden Text field

<input type="hidden" name="chech_file_size" value="5000"/>

The input type=‘hidden’ is not shown to the user. Usually developer uses this for security purpose etc. For example I will check if file uploaded from <input type=”file" > is greater than value of hidden text field (e.g. from value=”5000” which is equal to 5 KB) then file should not be uploaded.

Radio button

<label for="gender">Gender:</label>
<input type="radio" name="gender" value="male" />Male
<input type="radio" name="gender" value="female" />Female

Radio buttons are used for selecting one item from a set of choices. Use radio buttons when the choices are not too large. Each individual button need to be created using input type ‘radio’.
name=”gender”
Name of each individual radio button will be same for one set of choices as name=” gender” is in above case for both buttons.
value=””
if user checked the Male value= “male” will pass to server or if user checked the Female value=”female” will be passed to server other wise value=””.
checked=”checked”
Having the ‘checked’ attribute makes the check box ‘on’ by default.

Chech boxes

<label for="hobby">Hobby:</label>
<input type="checkbox" name="cricket" value="cricket" />Cricket
<input type="checkbox" name="football" value="football" />Football

Chech boxes are used for selecting one or many from a set of choices. like radio button each individual box need to be created using input type ‘chechbox’.
name=”cricket” and name=”football”
Name of each individual chechbox will be different for one set of choices as name=” cricket” for first box and name=”football” for second box in above case. It is difficult to handle different name of checkboxes for getting values. So easy way of getting checkboxes values is use of array like name=”hobby[]” for above example. How to get values of check boxes in php? Answer of this question is here www.b2atutorials.com.
value=”cricket” and value=”football”
If user checked first box value=”cricket” will be sent to server. If user checked nothing value=”” will be passed to server. If user checked all boxes all values should be passed to server.

Drop down list

<label for="country">Select Country:</label>
<select name="country">
<option value="UK">United Kingdom</option>
<option value="USA">United States of America</option>
<option value="SA">South Africa </option>
</select>

When you want to create a list of items for the user to select one value from form, create a drop down list. Instead of using input tag use <select> tag for creating a drop down list and give it a proper name as name=”country” in above example. Then use option tag for defining an option in a list. The option element goes inside the select element.
value=”UK”
value of selected option will be pass to server.
selected=”selected”
Use selected='selected' if you want a particular option should be selected when user come to the form. Like bellow

<option value=”SA” selected=”selected”> South Africa</option>

select multiple

<select multiple name="country">

If you will use multiple in select tag user will be able to select multiple countries form the above drop down list. Remember that handle getting multiple values as you see in check boxes (by using array like name=”country[]”) however it is more user-friendly to use checkboxes instead.

Text area

When you want to get a bunch of text from the user, the Textarea can be used. A TextArea is created using the tag <textarea>.

<label for="address">Address</label><textarea rows="6" cols="25" name="address"></textarea>

name=”address”
The name identifies this TextArea in the server side script.
cols=”25”
Defines the width (number of characters per line) the text area can accommodate without scrolling.
rows=”5”
Defines the number of lines (number of rows) the text area can accommodate without scrolling.

General button

A button input just displays a button on the form. To add meaning to the button, we need to add JavaScript code to handle the event when the user presses the button.

<input type="button" value="Click" onclick="alert('clicked')">

This code displays a button with label “Click!”. On pressing the button, a message box with message ‘Clicked’ is displayed.

Reset button

<input type="reset" value="Reset"/>

When the user presses the Reset button, all the elements in the form are reset to their default values./p>

Submit button

After entering the data, the user presses the submit button which triggers the browser to send the data to the server. You can add a submit button to the form using input=‘submit’.

<input type="submit" value="Submit" class="submit"/>

name =”submit”
There can be more than one submit buttons in a form. On the server side, the submit button which was pressed can be identified using the ‘name’ attribute.
value=”Submit”
The string given in the ‘value’ attribute is displayed as the label of the Submit button.

Posted in: HTML