Day 6: HTML Forms :Name attribute :Placeholder attribute :

 HTML Forms :

  • An HTML form is used to gather input from the user.     
  • <form> tag is used for creating an HTML form which can allow users to input data.    <form> tag can contain different types of different elements, like text fields, radio buttons, checkboxes, submit buttons, etc.           
  • Type attribute of <input> defines the various ways in which <input> elements can be shown.     
  • Various attribute values for the “Type” attribute are mentioned below :

  1. <input type="text"> 

It creates an input field supporting single-line text.

 2. <input type="radio">

Creates a radio button (can select only one choice with radio button)

3. <input type="checkbox">

Creates a checkbox (can select zero or multiple choices)

4. <input type="submit"> 

Creates a submit button (for submitting data in form)

5. <input type="button"> 

Creates a button

 

Name attribute :

  • Name of an HTML element is defined by the name attribute.

 

Placeholder attribute :

  • This attribute gives a hint to the user, stating the value to be expected from the user for an input field. (expected input format).             
  • Hint is shown in the input field before value is entered by the user.
  • Example:
    Code:

    <form>

            <input type="text" placeholder="First Name"

            <br>

            <input type="text" placeholder="Last Name">

    </form>

The <textarea> Element :

  • It is used to create a field which can contain multiple lines.
  • Example:

    <textarea name="anyName">

    Creates a textarea with 30 rows and 20 columns

    </textarea>

     

Difference between input type=”text” and textarea :

  • Textarea can contain multiple lines in it, whereas input type=”text” is used to contain only one single line.

 

The method Attribute

  • It describes how to send data through form.       
  • Data collected through form can be sent using GET or POST method. 

 

GET method :

  • After a form is submitted using the GET method, its values are visible in the address bar of the new tab of the browser.       
  • It should be used for sending data which is not secured, and not for information that is sensitive. 
  • Syntax :
    <form method=”GET”>

 

POST method :

  • After a form is submitted using the POST method, its values are not visible in the address bar of the new tab of the browser.   
  • Syntax :
    <form method=”POST”>

Comments

Post a Comment

Popular posts from this blog

else-if condition in if-else statements: Concatenation in JavaScript :

Image
  else-if condition in if-else statements: While specifying conditions for if-else statements, there may arise a need to include more than just two scenarios. For example, suppose we have a variable ‘n’ and we have to check if it is positive or negative. JS code for this problem would look like this: Quite simple, right? However, suppose we twist this problem a bit. If we have to check if the value of ‘n’ is positive, negative, OR zero. Can we do it using only if-else?  No, right? Here comes the scenario where we have to check more than two conditions and give output for each. This is where else-if comes into the game.  Structure of if else-if else looks something like this: If (condition 1)  { statements } else if (condition 2) { statements } else  { statements }   Working for the above code is explained as follows: Condition 1 is checked first. If it is true, statements inside the first block are executed and the remaining conditions are not checked. If t...
Read more

Day 9: CSS - Font Formate

Image
p1{  font style: italic, } p2{ font-variant: small-caps; } p3{ font-weight: 400px: } p4{ font-size: 12pt } p5{ font-family:  } ----------------------------------------------------------------------------------------------------------------------- The CSS font-family Property : The font-family property in CSS is used to specify the typeface of a text.      If the font name has more than one word, such as "Times New Roman," quotation marks must be used.        Example: The following code applies a font family to a paragraph using class ids:I        Code :   Output :     The CSS font-size Property : The font-size attribute controls a font's size.      It has an impact on the text size of an element. Every element can use it, and its default value is medium. This attribute has values like xx-small, small, x-small, etc.      Font-size can also be specified in pixels (which sets the f...
Read more

Day 28: CSS Animation, CSS Transition Animation Box size

Image
------------------------------------------------------------------------------------------------------------------------ <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link rel="stylesheet" href="styles.css"> <!-- Link to your external CSS file -->   <title>Your Webpage Title</title> </head> <body>   <div class="grad"></div> <!-- Your HTML element with the "grad" class --> </body> </html> @keyframes example {   0% { background-color: red; left: 0px; top: 0px; }   25% { background-color: yellow; left: 200px; top: 0px; }   50% { background-color: blue; left: 200px; top: 200px; }   75% { background-color: green; left: 0px; top: 200px; }   100% { background-color: red; left: 0px; top: 0px; } } .grad {   width: 100px;   heigh...
Read more