11
Form tag

9 Form

Embed Size (px)

DESCRIPTION

html forms

Citation preview

Page 1: 9 Form

Form tag

Page 2: 9 Form

• Forms tag is use to retrieve information from the web.• For example registration information: name, email address, credit card, etc.

• Form elements are like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc. which are used to take information from the user.

<form action="back-end script" method="posting method">form elements like input, textarea etc.

</form>

Page 3: 9 Form

Most frequently used form attributes are:• name: This is the name of the form.• action: Here you will specify any script URL which will receive

uploaded data.• method: Here you will specify method to be used to upload data. It

can take various values but most frequently used are GET and POST.

Page 4: 9 Form

Text fields:• Every form will have input fields. Use the <input> tag to create input

fields with following attributes.• Type : text, radio checkbox, password, submit and reset• Name: Assign a name to the given field.• Size: Set the width of the field• Maxlength: maximum number of char. That can be entered.

<form>First name: <input type="text" name="first_name" /><br>Last name:<input type="text" name="last_name" /><input type="submit" value="submit" />

</form>

Page 5: 9 Form

Radio button:• Radio Buttons are used when only one option is required to be selected.

• Value: value to be sent to server.• Name : defines name of control.

<form><input type="radio" name="subject" value="maths" /> Maths<input type="radio" name="subject" value="physics" /> Physics<input type="submit" value="Select Subject" />

</form>

Page 6: 9 Form

checkbox• Checkboxes are used when more than one option is required to be

selected.

<form><input type="checkbox" name="maths" value="on"> Maths<input type="checkbox" name="physics" value="on"> Physics<input type="submit" value="Select Subject" />

</form>

Page 7: 9 Form

Drop down list <select>• Drop down list means predefine lists of items.• To create dropdown list <select> and <option> tags use.

<form><select name="dropdown"><option value="Maths" selected>Maths</option><option value="Physics">Physics</option></select><input type="submit" value="Submit" />

</form>

Page 8: 9 Form

Multiple-Line Text Input Controls:<textarea>• If you want to allow a visitor to your site to enter more than one line of text, you

should create a multiple-line text input control using the <textarea> element. E.g. comments.• Rows and columns need to be specified as attributes to be <textarea> tag.

<form>Description : <br /><textarea rows="5" cols="50" name="description">Enter description here... </textarea><input type="submit" value="submit" /></form>

Page 9: 9 Form

Creating Button:• There are various ways in HTML to create clickable buttons. You can

create clickable button using <input> tag.

• submit: This creates a button that automatically submits a form.• reset: This creates a button that automatically resets form controls to

their initial values.• button: This creates a button that is used to trigger a client-side script

when the user clicks that button.

Page 10: 9 Form

<form><input type="submit" name="Submit" value="Submit" /><br /><br /><input type="reset" value="Reset" /><input type="button" value="Button" />

</form>

Page 11: 9 Form

Password input controls:• This is also a form of single-line text input controls are created using

an <input> element whose type attribute has a value of password.

<form>Login :<input type="text" name="login" /><br>Password:<input type="text" name="password" /><input type="submit" value="submit" />

</form>