Breaking News
You are here: Home / Notes / SEM-5 / PHP MYSQL / PHP Form Elements

PHP Form Elements

php form elements

 

  • Normally client make a request for particular page of the website to the server, server gives the requested page as a response to the client.
  • Every time when you open an webpage this results in a series of requests and responses between the client(your browser) and the web server that hosts the requested sites.
  • Each request tells the server that the client wants specific page and each response carries the requested page.
  • Form tag is act like a container it contains all the controls.
  • Form tag takes a user inputs  in html controls and it submitted to server, so now you can fetch data from form tag and can work with that.
  • When we submit a form it will submitted to server for further process. After submitting form to the server we can make a transaction with form data using server-side languages like php,asp,jsp.
  • All the server side languages are executed on the server only so that if we want to work with server side languages, we have to transfer a data from client side using form tag.

 

Form Properties 

Name

Value

Description

acceptCharset character_set containing a list of character encodings that the server accepts.

list of supported char sets
action URL containing the URI of a program that processes the information submitted by the form. Specifies where to send the form-data when a form is submitted.
enctype application/x-www-form-urlencoded
multipart/form-data
text/plain
indicating the type of content that is used to transmit the form to the server. Only specified values can be set.Specifies how the form-data should be encoded when submitting it to the server
method get
post
indicating the HTTP method used to submit the form. Only specified values can be set.
name Name of the form Specifies name of the form.
target _blank
_self
_parent
_top
indicating where to display the results received from submitting the form.

 

The basic elements of form

  1. text box
  2. password
  3. hidden
  4. text area
  5. radio button
  6. check box
  7. drop down list
  8. listbox
  9. file
  10. image
  11. button /reset / submit  button

 

Textbox

Description
 textbox

A single line text box can be used to collect single line input from user like name, email, phone number etc.

Example <input type=”text” name=”txtname” value=”Enter Name” maxlength=”20″ />

Attributes

type=”text” Type attribute is used to define a type of the html input. Here type=”text” so one Textboxwill be generated.
name Used to assign the name to the Textbox.
value text you give as value will be displayed by default in the text box. here in our example defaulttext will be “Enter Name”.
maxlength Specifies the maximum number of characters the user can enter into the text box. Here inout example you can enter only 20 characters in the textbox.

 

Password

Description
 password

It is like a textbox only difference is whatever you are typing it will not displayed (it displayed only specified symbols). It is used when you want to hide your text like password.

Example <input type=”password” name=”txtpsw” maxlength=”20″/>

Attributes

type=”password” Type attribute is used to define a type of the html input. Here type=”password” soone password control will be generated.
Name Used to assign the name.
Value Used to set the values of the control.
maxlength Specifies the maximum number of characters the user can enter into the password box.Here in out example you can enter only 20 characters in the password box.

 

Hidden

Description

It is like a textbox only difference is hidden field does not show on the page. Therefore the visitor can’t type anything into a hidden field.

Example <input type=”hidden” name=”txthdn” value=”test” />

Attributes

type=”hidden” Type attribute is used to define a type of the html input. Here type=”hidden” so one hiddentextbox control will be generated.
Name Used to assign the name.
Value Used to set the values of the control.

 

Textarea

Description
 textarea

A single line text box can be used to collect multi line input from user like address, feedback, description , comments etc.

Example
<textarea name="feedback" rows="10" cols="40">default text here.</textarea>

Attributes

name Used to assign the name to the textarea.
rows Specifies the number of rows in textarea. here in our example number of rows is 10.
cols Specifies the number of columns in textarea. here in our example number of columns is 40.

 

Radio Button

Description
 radia button

A Radio button can be used to collect input like one choice from the multiple option from user like select your sex (male or female).

Example <input type=”radio” name=”op1″ value=”Option1″ /> Option1<input type=”radio” name=”op2″ value=”Option2″ /> Option2

Attributes

type=”radio” Type attribute is used to define a type of the html input. Here type=”radio” so radio buttonwill be generated.
name Used to assign the name to the radio button.
value Used to assign the value to the radio button.

 

Checkbox

Description
 checkbox

A checkbox can be used to collect input like multiple choice from the multiple option from user like select your hobbies (travelling , reading, dancing, painting etc.)

Example <input type=”checkbox” name=”op1″ value=”Option1″ /> Option1<input type=”checkbox” name=”op2″ value=”Option2″ /> Option2

Attributes

type=”checkbox” Type attribute is used to define a type of the html input. Here type=”checkbox” socheckbox will be generated.
Name Used to assign the name to the checkbox.
Value Used to assign the value to the checkbox.

 

Dropdown list(combo box)

Description
 dropdown

A Dropdown list can be used to collect input like selecting a single item from multiple choice from user like select your country , state, city etc.

Here radio button and drop-down box both can be used as a single choice from multiple. But the difference if in drop-down box all the options are collapsed so it takes less space of your html page. So it is advisable to take drop-down box where your number of options are more. And use radio button where number of options are less.

Example <select name=”mydropdown”><option value=”Option1″>Option1<option value=”Option2″>Option2<option value=”Option3″>Option3

</select>

Attributes

name Used to assign the name to the dropdown.
option Used to create an options for dropdown.
value Used to assign the value to the option.

 

Listbox

Description
 listbox

It is like a drop-down list but only difference is all the options are visible at a time. You can create listbox by declaring size property in drop-down list.

Example <select size=”4″ name=”mylistbox”><option>option1<option>option2<option>option3

<option>option4

</select>

Attributes

name Used to assign the name to the listbox.
size Used to declare size of the listbox.
multiple Used to select more than one item from the list
option Used to create an options for listbox.
value Used to assign the value to the listbox.

 

File

Description
 file control

Used to take a image as a input from user. If you want to upload a file to the server , you have to set enctype=”multipart/form-data” in form without this you can’t upload file to the server.

Example <form method=”post” enctype=”multipart/form-data”><input type=”file” name=”myfile” /></form>

Attributes

type=”file” Type attribute is used to define a type of the html input. Here type=”file” so html file tag willbe generated.
name Used to assign the name of the html file control.

 

Image

Description
 image control

Used to display an image.

Example <img src=”logo.png” height=”100″ width=”200″ />

Attributes

src Specifies the location of the the file.
height Specifies the height of a image.
width Specifies the width of the image.

 

Button , Submit, Reset button

Description
 button submit reset

buttons will not submit a form – they don’t do anything by default. it is used with client side operations with JavaScript.

 

Submit button is used to submit a form to the server.

 

Reset button is used to reset a form.

Example <input type=”button” value=”i am button” /><input type=”submit” value=”i am submit button” /><input type=”reset” value=”reset” />

Attributes

Type Type attribute is used to define a type of the html input.Type=”button”=simple buttonType=”submit”=submit buttonType=”reset”=reset button
Name Used to assign the name.
Value Used to set caption(value) of the button.

Download Paper Solutions from Below Link

About admin

Scroll To Top