Chapter 3:

ID Attribute:

• It is to identify elements for style and scripting purposes.
• Each id should be unique.
• Valid to any element in Html.
• It can be referenced with # in CSS.
• It can be referenced with getElementById in JS.
• Must begin with a letter.
• It is a case sensitive.

Name Attribute:

• It is used for form elements to get values after submitted.
• Name does's not have to be unique.
• Valid only to a,form,input,img,textarea,select,iframe.
• It can't be referenced in CSS.
• It can be referenced with getElementByName in JS.
• Must begin with a letter.
• It is a case sensitive.

Code:

Output:

1. Here we used same name to two radio buttons to get only one value 
2. Based on id also ,we can get the value of element and to add css styles.

Chapter 4:

Input Element Attributes:

• Width attribute is used to set width of an elements like img,video etc in pixels. 
• Height attribute is used to set height of an elements in pixels.
• Maxlength attribute is used to specify number of characters in a element.
• Value attribute specifies default value to html element.
• Size attribute specifies the visible width in characters.
• We can resize width & height of html element by using Customized css.

Simple Form with different width, height and default value input attribute:

Code:   


Output:

Chapter 5:

Readonly Attribute:

• Readonly attribute specifies that an element is read only.
• We can't modify the default value of element.
• Only available for text field and text area.
• Value in the field post to server.
• It will get focus.
• For example,when we open our profile section then unique data should be readable.

Syntax:

Output:

Disabled Attribute:

• Disabled element is un-clickable.
• Available for button,text field,input,text area,select elements.
• Value does't post to server.
• Don't get focused.

Syntax:

Output:

Focus Attribute:

• When a page loads, The html element Should get focused.
• This attribute applied to <input>,<textarea>,<select>,<button> tags.

Code:

Output: