Chapter 7:

Text alignment in Text Box:

• We can align the text in text field by using text-align property.
• Values of text-align are left,center,right.
• By default, data will be left aligned.

    Code:

    

    Output:

    Center aligned text box:

    

    Left aligned text box:

    

    Right aligned text box:

               

Mouse Cursors:

• In CSS, we can change the mouse cursor by using cursor property.
• Syntax:  cursor:value.
• we can use different values based on our requirement.
• some values are
1. contex-menu
2. no-drop,not-allowed
3. none
4. wait,progress
5. zoom-in
6. zoom-out
7. pointer

     Code:

     

   

     Output:

        

Chapter 8:

Select Box:

• Select element is a form control.
• Used to collect user data.
• To create a drop down list in the forms.
• <select> tag is used.
• To choose available options <option> tag is used.
• attributes of select element are
1. disabled
2. autofocus
3. required
4. name
5. size
• if we use disabled attribute,we can't select options.
• if we use autofocus attribute,when page loads automatically focused to that particular html element.
• if we use required,before submitting the form user must select the option.
• name attribute defines a name to element.
• size represents the visible options in the select element.

     Code:

     

    

     Output:

    

Chapter 9:

Select Boxes with different sizes:

• Width attribute is used to specify width of element in % or pixels.
• Size attribute is used to specify visible options in a element.
• Disabled attribute is used to specify that element is disabled.

     Code:

     

  Output:

• I used width:25px for first select box.
• I used size for second select box.
• I used size and disabled attributes for third select box.

Chapter 10:

Applying styles to Html elements:

• Here i used border property to give
1. border thickness
2. border style
3. border color
• Width and height properties to resize the control element.

    Css Code:

    

    Html Code:

   

    Output:

    

Chapter 11:

Html Text area Element:

• To collect multi line text from user, we have to use textarea element.
• Syntax: <textarea></textarea>.
• We can specify number of rows and columns by rows and cols attributes.

     Task: Design one textarea to enter address Textarea.

     Code:

     

      Output:

     

Chapter 12:

Task: Design the 3 Text areas  with different size.

1) Maxlength: GIve maxlength 100 to char.

2) Apply other attributes of Input

Code:

      Output:

      

• I used rows and cols attribute to specify rows and columns in textarea.
• Maxlength is used specify number of characters supported by textarea.
• width and height attributes are used to resize textarea.

Chapter 13:

Css styles to Textarea:

• We can apply css styles to textarea.
• I used border property to give border style,color.
• I used font style attribute to the text of textarea.
• I used background-color attribute to give background color to element.

     Code:

     

     

     Output:    

    

Chapter 14:

Different types of buttons in Html:

• In html, buttons are clickable.
• A simple button type won't submit the form.
• If we specify submit button then it will be collect the data and submitted.
• If we specify reset button, then form data will be cleared.
• To create buttons, we can use <input> element and <button> element.
• In input element, type attribute is used to specify type of button.
• By using <Button>, we can place text or image as a button.

     Code:

     

     

     Output:

     

Chapter 15:

Attributes for button:

• We can give names to buttons by name attribute.
• Value attribute is represents the text on button.
• We can apply css styles to buttons.
• Disabled button is disable to click.

     Syntax:

     <input type="value"> (or)

     <button>content</button>

     code:

    

     Output:

    

Chapter 16:

Css Buttons:

• We can apply styles to buttons.
• We have different properties for a button,
• Some properties are
1. background-color
2. border
3. border-radius
4. font-size
5. padding
6. text-decoration
7. text-align

    Code:

    

     

     

      

     Output: