Forms

Task:1

Design any real time sample form with 2 text boxes, radio button, checkboxes and a button to submit the form.

1. Input type: TextBox
2. Radio
3. Checkbox
4. Button

Steps:

1. Create a division and make it as center.
2. Give width, height, margin like css properties to the division.
3. Create a table and give css properties like background-color, border-radius.
4. Create a form within the table and make table heading wiht in the th tag.
5. Create two input type text boxes and create a placeholder to give information about the text field.
6. Create radio buttons and chechboxes.
7. Create a submit button and remove its border.
8. Use some css properties to change its layout.

Code:

Output:

Task:2

Simple form with different width, height and Default value input attributes.

1. Width: Four of each textbox, radio and checkbox w=10,20,30
2. Height: Four of each textbox, radio and checkbox h=10,20,30
3. Maxlength: Four of each textbox, radio and checkbox ml=10,20,30
4. Value: Four of each textbox, radio and checkbox v=10,20,30
5. Size: Four of each textbox, radio and checkbox s=10,20,30

Steps:

1. Create a form using form tag within the division and make it as center.
2. Create four input type text boxes with four different sizes.
3. Create two radio buttons with two different sizes by giving width and height.
4. Create four checkboxes with four different sizes by giving with and height.
5. Give maxlength for text type and value for radio.

Code:

Output:

Task:3

Apply the Attributes readonly, disabled and focus.

1. Readonly: two text boxes with readonly=on readonly=off.
2. Disabled: two text boxes with disabled=on disabled=off.
3. Focus: two text boxes with focus=on try three forms with different focus for different elements.

Steps:

1. Create a div and give some css properties i.e. width, height and background color.
2. Kept heading as Registration form using h1 tag.
3. Create a form using form tag.
4. Create six text boxes with input type=text tag.
5. Use css property Input:focus{background-color:yellow} to current mouse selected text box.
6. Use css property readonly to two text boxes.
7. Create three radio buttons and disable one of those radio button using disabled option.
8. Create four checkboxes and make one of it as readonly.
9. Create submit button and remove the border.
10. Using padding make the submit button as bigger and make it's text color as grey.
11. For all text boxes set margin-top is 8px and font-family is arial.

Code:

Output:

Task:4

Apply the styles.

1. Use style tag.
2. Apply css using id and class: Use ID and class to apply different styles.
3. Give border: Give border to the text boxes with different sizes and one text box with no border.
4. Border color: give different border color to 4 different sizes of input elements
5. Background color: change the background color of the text box and radio button and checkboxes.

Steps:

1. Create a div with proper height, width and background-color.
2. Create a h1 tag as register form and fix its margin-top.
3. Create a form using form tag and take some input fields.
4. Create six types of input fields with different height, width, border type, padding and color.
5. Use readonly and disabled attributes to input fields.

Code:

Output: