HTML Form - Part 4

     I hope you read my HTML Form Part 3 article.

     Let's learn HTML input attributes.

• value = "" : specifies the value for an input field.

               Example code
                     <form action="#">
                                   First name:<br>
                                   <input type="text" name="firstname" value ="John">
                             </form>

               Output

• readonly : specifies that the input field is read only (cannot be changed).

               Example code
                     <form action="#">
                                  First name:<br>
                                  <input type="text" name="firstname" value ="John" readonly>
                             </form>

• disabled : specifies that the input field is disabled. It is not submitting any value to the form.

               Example code
                     <form action="#">
                                   First name:<br>
                                   <input type="text" name="firstname" disabled>
                             </form>

               Output

• size = " " : specifies the size (in characters) for the input field.According to the changes of the size, input field is changed. Do the changes of size and get the idea about that.

               Example code
                       <form action="#">
                               First name:<br>
                               <input type="text" name="firstname" size="10">
                         </form>

               Output

• maxlength = " " : specifies the maximum number of character for the input field.

               Example code
                       <form action="#">
                               First name:<br>
                               <input type="text" name="firstname" maxlength="10">
                         </form>

• min = " " : Specifies the minimum value for the input field.
• max = " " : Specifies the maximum value for the input field.

     It can use for number input and range input tags

               Example code
                     <form action="#" method="get">
                              Points:
                              <input type="range" name="points" min="0" max="10">
                              <input type="submit">
                       </form>

     Let's learn HTML5 input attributes.

• step = " " : Specifies the legal number intervals for an input field. It can be use for number input tags.

               Example code
                     <form action="#">
                             Quantity:
                             <input type="number" name="quantity" min="0" max="100" step="10"
                              value="30">
                             <input type="submit">
                       </form>

• pattern = " " : specifies a regular expression to check the input value against.

               Example code
                     <form action="#">
                             Telephone: 
                             <input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
                             <input type="submit">
                             <span>Format: 123-45-678</span>
                       </form>

• required : Specifies that an input field must filled before the submitting the form. It works with the type of text, search, url, tel, email, password, date pickers, number, checkbox, radio and file.

               Example code
                  <form action="#">
                               First name:<br>
                               <input type="text" name="firstname" required>
                         </form>

               Output

• placeholder : Specifies a hint that describes an expected value of the field. It works with the type of text, search, url, tel, email and password.

               Example code
                  <form action="#">
                               First name:<br>
                               <input type="text" name="firstname"  placeholder="First Name">
                               <input type="text" name="lastname"  placeholder="Last Name">
                         </form>


               Output

     I think now you have an idea of input attributes.

     See you soon with the HTML Form part 5 (HTML5 input attributes.)

HTML Form - Part 3

     I hope you read my HTML Form Part 2 article.

     Let's learn HTML5 input types

• <input type="color"> : Used for input fields that should contain a color. 

               Example code
                      <form action="/action_page.php">
                           Select your favorite color:
                           <input type="color" name="favcolor" value="#ff0000">
                      </form>

               Output

• <input type="date"> : Used for input fields that should contain a date. 

               Example code
                      <form action="/action_page.php">
                           Birthday:
                           <input type="date" name="bday">
                      </form>

               Output

• <input type="datetime-local"> : specifies a date and time input field, with no                                                                         time zone. 

               Example code
                      <form action="/action_page.php">
                           Birthday (date and time):
                           <input type="datetime-local" name="bdaytime">
                      </form>

               Output

• <input type="email"> : Used for input fields that should contain an email address. 

               Example code
                      <form action="/action_page.php">
                           E-mail:
                           <input type="email" name="email">
                      </form>

               Output

     If the '@' email is missing it shows the alert as "Please include an '@' in the 
     email address.

• <input type="file"> : defines a file-select field and a "browser" button for file uploads. 

               Example code
                      <form action="/action_page.php">
                           Select a file:  
                           <input type="file" name="myFile">
                      </form>

               Output

• <input type="month"> : allows the user to select a month and year. 

               Example code
                      <form action="/action_page.php">
                           Birthday (month and year):
                           <input type="month" name="bdaymonth">
                      </form>   

               Output

• <input type="number"> : defines a numeric input field. 

               Example code
                      <form action="/action_page.php">
                           Quantity (between 1 and 5):
                           <input type="number" name="quantity" min="1" max="5">
                      </form>

               Output

• <input type="range"> : defines a control for entering a number whose exact value                                              is not important (like a slider control). Default range is 0                                                     to 100. 

               Example code
                      <form action="/action_page.php" method="get">
                           Points:
                           <input type="range" name="points">
                      </form>

               Output

• <input type="search"> : used for search field. 

               Example code
                      <form action="/action_page.php">
                           Search Google:
                           <input type="search" name="googlesearch">
                      </form>

               Output

• <input type-"tel"> : used for input fields that should contain a telephone number. 

               Example code
                      <form action="/action_page.php">
                           Telephone: 
                           <input type="tel" name="phone">
                      </form>

               Output

• <input type="time"> : allows users to select the time. 

               Example code
                      <form action="/action_page.php">
                           Select a time:
                           <input type="time" name="usr_time">
                      </form>

               Output

• <input type="url"> : used for input fields that should contain a URL address. 

               Example code
                      <form action="/action_page.php">
                           Add your homepage:
                           <input type="url" name="homepage">
                      </form>

               Output

• <input type="week"> : allows users to select a week and year. 

               Example code
                      <form action="/action_page.php">
                            Select a week:
                            <input type="week" name="year_week">
                      </form>

               Output

      I think now you have an idea of HTML5 input tags.

     See you soon with the HTML Form part 4 (HTML input attributes) 

HTML Form - Part 2

     I hope you read my HTML Form Part 1 article.

     Let's learn input tags of form.

Input tags

     Most, but not all, form elements use the input tag, with a type="..." argument to 
     tell which kind of element it is. Type can be text, password, checkbox, radio,
     hidden, file, image, submit or reset.

• <input type="text"> : defines a one-line text input field.

               Example code
                      <form action="/action_page.php">
                           First name:<br>
                           <input type="text" name="firstname">
                      </form>

               Output

• <input type="password"> : defines a password field.

               Example code
                      <form action="/action_page.php">
                           User password:<br>
                           <input type="password" name="psw">
                      </form>

               Output

     Password is a confidential information. therefore characters of the password 
     field are shown as  asterisks or circles.

• <input type="checkbox"> : defines a checkbox. User can select zero or more options of a limited number of choices.

               Example code
                      <form action="/action_page.php">
                           <input type="checkbox" name="vehicle1" value="Bike">I have a bike
                           <br>
                           <input type="checkbox" name="vehicle2" value="Car">I have a car 
                      </form>

               Output

     You can see the name attribute is different in two input tag.

• <input type="radio"> : defines a radio button. Users can select only one of a limited number of choices.

               Example code
                      <form action="/action_page.php">
                           Gender : <br>
                           <input type="radio" name="gender" value="male" checked> Male<br>
                           <input type="radio" name="gender" value="female"> Female<br>
                           <input type="radio" name="gender" value="other"> Other
                      </form>

               Output

     You can see the name attribute is the same. if it is different all the radio button 
     can select. It is not the condition of the radio button. 
               Example code
                      <form action="/action_page.php">
                           Gender : <br>
                           <input type="radio" name="gender1" value="male" checked> Male<br>
                           <input type="radio" name="gender2" value="female"> Female<br>
                           <input type="radio" name="gender3" value="other"> Other
                      </form>

               Output

     Therefore name must be same.

• <input type="hidden"> : All input fields are sent back to the server, including hidden fields. This is a way to include information that the user doesn't need to see.

               Example code
                      <form action="/action_page.php">
                           <input type="hidden" name="hiddenField" value="23">
                      </form>

               Output

• <input type="submit"> : defines a button for submitting form data to a form-handler.

               Example code
                      <form action="/action_page.php">
                           <input type="submit" value="Submit">
                      </form> 

               Output

• <input type="reset"> : defines a reset button that will reset all form values to their default values.

               Example code
                      <form action="/action_page.php">
                           <input type="reset">
                      </form> 

               Output

• <button type="button">Submit </button> : take some action as specified by JavaScript.

               Example code
                      <form action="/action_page.php">
                           <button type="button">Submit</button>
                      </form>

               Output

• <textarea>---</textarea> : defines for multi-line input.

               Example code
                      <form action="/action_page.php">
                           <textarea name="message" rows="10" cols="30">
                                The cat was playing in the garden.               
                           </textarea>
                      </form>

               Output

• <select><option>---</option></select> : defines a drop-down lists.

         <option>--</option> : defines an option that can be selected.

               Example code
                    <form action="/action_page.php">
                         <select name="cars">
                              <option value="volvo">Volvo</option>
                              <option value="saab">Saab</option>
                              <option value="fiat">Fiat</option>
                              <option value="audi">Audi</option>
                         </select>
                    </form>

               Output

     I think now you have an idea of input tags.

     See you soon with the HTML Form part 3 (HTML5 input types)

HTML Form - Part 1

     I hope you read my HTML Tables article.

     Forms provide way to collect user data. I think you also fill the form in your life
   manually or online.In manual form it can be printed document or hand written 
   form. Have you not come to your mind the question of how to display that form 
   on the web page and how to generate that form? I had that problem. I found 
   the answer of that problem. Now I am solving your problem. 

     Form also created using HTML. Let's learn how to create the form using HTML.

What the form?

HTML Form tags

• <form>--</form>

              Form elements have different types of input elements. Input elements of 

             form will discuss in next blog.

Attributes of the Form

• action="url" (required)

              Specifies where to send the data when the Submit button is clicked.

                    <form action="/action_page.php">--</form>

              In the example above, the form data is sent to a page on the server 
              called "/action_page.php". This page contains a server-side script 
              that handles the form data.

                      <form>--</form>  OR   <form action="#">--</form>
              If the action attribute is ommitted, the action is set the current page.

• method="get"

              Form data is sent as a URL with ? form_data info appended to the end. 
              The submitted form data will be visible in the page address field.


                       /action_page.php?firstname=Mickey&lastname=Mouse

                The default method when submitting form data is GET.

                       <form action="/action_page.php" method="get">

               NOTE : 1. That method not good for the users. Because if some user 
                               submit his/her private data like credit card number, passwords. 
                               and leave with out closing the tab. Some people went to that 
                               computer and he/she can see the data of the user. It is threat to 
                               that person's life. Therefore the get method not good for the 
                               form submission.
                           2. GET is better for non-secure data, like query string in Google.
                           3. Can be used only if data is all ASCII and not more that 100 
                               characters.

• method="post"

              Form data is sent to the body of the URL request. The POST method 
             does not display the submitted form data in the page address field.

                     <form action="/action_page.php" method="post">

              NOTE : 1. POST has no size limitations, and can be used to send large 
                               amounts of data.
                           2. Form submissions with POST cannot be bookmarked.

• target="target"

               Tell where to open the page sent as a result of the request.

                        target=_blank : means open in a new window.
                        target=_top : means use the same window.

• name="form1" : It is required attribute in form. Specifies a name used                                to identify the form.

• accept-charset : Specifies the charset used in the submitted                                               form (default: the page charset).

• autocomplete : Specifies if the browser should autocomplete the form                                 (default: on).

• enctype : Specifies the encoding of the submitted data (default: is                           url-encoded).

• novalidate : Specifies that the browser should not validate the form.

     Did you see some form group their information like personal information, contact 

     information?

     This is the example for the grouping of the form. I think you get that.

     Let's see how to grouping the form in HTML.

• <fieldset> : used to group related data in a form.
• <legend> : defines a caption for the <fieldset> element.

              Example code

                    <form action="/action_page.php">

                         <fieldset>

                              <legend>Personal information:</legend>

                              First name:<br>

                              <input type="text" name="firstname" value="Mickey">

                              <br>

                              Last name:<br>

                              <input type="text" name="lastname" value="Mouse">

                              <br><br>

                              <input type="submit" value="Submit">

                         </fieldset>

                    </form>

               Output : 

     I think now you have a basic idea about the form.

     See you soon with the HTML Form Part 2 (input element).