HTML CLASS,ID AND FORMS.

Html Forms.

many elements in this,

1. <input>

2. <label>

3. <select>

4. <textarea>

5. <button>

6. <fieldset>

7. <legend>

8. <option>

9. <optgroup>

1. FORM TAG:-

<form> :- 

                element is used to create an Html form and also for creating buttons like submit button, reset button, text field, checkbox, etc....

<input> element:-

<input> element used to putting values in every type of button. and also it can be displayed in many ways and

one of this is depending on the type attribute. also, describe the id and name attribute in this <input> element.

In input type many attributes like -

1. value - specify the values for the input field.

2. readonly - used only to read the input field not change anything from it.

            syn:-  <input type="text" value="m" name="email" id="mail" readonly>

3. disabled:- use to disabled the input field, you do not click this button until not change/cut the attribute.

  syn:- <input type="text" value="f" name="email" id="mail" disabled>

4. multiple:- use to allow a user to allow to enter more than one or two inputs in the field.

  syn:- <input type="text" name="email" id="mail" multiple>

5. required:- specify that the input field must be filled out before the submit.

  syn:- <input type="text" name="email" required>

6. size - specify the size f the character. the default size is 20.

7. maxlength -  specify the maximum number of characters allowed to the input field.

syn:- <input type="text" value="p" name="password" maxlength="6">

8. min and max:- specify the minimum and maximum values. use in numbers, range declaration, date, month, day, year, etc...

9. pattern:- specify the regular expression and particular pattern for any number, text, date, mail, URL, password, and code. 

syn:-<input type="text" name="Date" pattern="[dd-mm-yy]">

10.placeholder- specify the type of hint provides to the input field, this is displayed in the input field before the user enters a value.

    syn:-<input type="text" name="Date" pattern="[12-08-2020]">

11. autofocus and autocomplete:- specifies that field should automatically focus when page start/load.

and autofocus specifies that field should have autocompleted on or off.it's use to predict the value from the browser.

syn:- <input type="text" name="mail" autocomplete="off/on">

<input type"text" name="list" autofocus>

12. height and width - specify height and width for the image in the field.

Ex..  <input type="text">            

<input type="button">

<input type="submit">

<input type="reset">

<input type="checkbox">

<input type="radio">

<label> element:-

                                   <label> element is defines a many labels. Is also useful for screen- reader users, because it will be read out loud the label.  element also help users who have/ get difficulty clicking on small regions like radio/checkbox .  for the attribute is used to the label tag it's like id attribute of the <input> element.

 syntax:- <label> lists </label>

<select> and <option>-

• use to defines a drop-down lists.
•   <option> is a attribute for the select element.it's defines for an option that can be selected to the list.
• In this size, name, id attributes to specify the size of visible value id and specific name for the list label.

 

  syntax:- <select>

<option value="cars"> cars </option>

    .

.

</select>

<textarea> :-

      Element defines a multi-line field.row and cols attributes to specify row and column into textarea.

syn:- <textarea name="note" row="10" cols="10">

<button>:-

    define a clickable button into the form. syn:-

             <button type="button" onclick="alert('click here')"> click me </button>

<legend> nad <fieldset>:-

used to group related data in a form. legend defines for a caption for this.

   legend is used to create a textbox and specifies characters show into this textbox line.

 syn :- 

        <fieldset>

<legend> data </legend>

</fieldset>

<optgroup> -

Use to define a group related option. the long list of options is easily handled for the user.

Use to define a text label into the group it's like click button and open the list of things.

syn:-

                 <optgroup label="Degree">

<option value=""> computer eng. </option>

     </optgroup>

HTML CLASS AND ID.

 CLASS:- 

The class attribute is used to point a class name into the sheet. also, use to JavaScript access elements with this class name

<div> element with a <class> attribute.

To define the class it's a syntax for a class (.) character, followed by the class name. then define the {} and in this braces write the code.

also, define multiple classes.

syn:-  .city{

      .

      :

    }

<div class="city">

    :

    :

</div> 

ID:- 

Id attribute defines a unique id for HTML elements.use to point a specific style in code.

 The syntax for id is-write with the # character, followed by the name and id. define CSS property within the curly braces{}.

Syn:-

 

#city{.......}

<h6><id="city"> city                                    

                                           Thank you.