Html Forms

CHAPTER 1: Output:Simple form with only one text box
                     Code:



Output:
                     


  • Form creation
  • The HTML <form> element defines a form that is used to collect user input: Eg:<form> 
          Form elements
</form>
Form elements are different types of input elements, like text fields,
checkboxes, radio buttons, submit buttons, and more.        
  • Form Definition and use
  • A web form or html form on web page allows a user to enter data that is sent to a server for processing or can be used to retrieve search results from a search engine.                   
  1. Form tag <Form></Form>
  • There are many attributes which are associated with <form> tag. Some of them are listed below:
  • input: It is used to specify the input field for user.
  • textarea: It is used to specify for multi-line text input field for user.
  • button: It is used to perform an operation in a form by the user.
  • label: It is used to give label to any tag like button, input etc.
Form Attributes
    1. Name
    1. ID
                               Code:
                                     
Output:
                      
CHAPTER 2:  OUTPUT: Simple form with one textbox, one radio button, one checkbox and on submit button
    1. Input
Input Types
1.TextBox: Text box is used to enter the text inside the box like characters.
2.Radio: This is used used to select one option from multiple
3.Checkbox: This is used to select multiple options.
4.Button: This is used to submit the data we are entered.
Code:
Output:
    
       
CHAPTER 3: OUTPUT:  Simple form with How to use the main and default attributes of  input
1.ID: This is used to give some styles to html tags by using id names.
2.Name: This is also used to apply the styles to the html tags.
  • The value attribute specifies the initial value for an input field.
  • The readonly attribute specifies that the input field is read only (cannot be changed).
  • The disabled attribute specifies that the input field is disabled.
  • The size attribute specifies the size (in characters) for the input field.   
  • The maxlength attribute specifies the maximum allowed length for the input field.            
  Code:
Output:

CHAPTER 4:  OUTPUT: Simple form with different width, height and Default value Input Attributes
1.Width: Four of each text-box,radio and checkbox w=10, 20, 30
2.Height: Four of each text-box,radio and checkbox h=10, 20, 30
3.Max-length: Four of each text-box,radio and checkbox ml=10, 20, 30
4.Value: Four of each text-box,radio and checkbox v=10, 20, 30
5.Size: Four of each text-box,radio and checkbox S=10, 20, 30
 Code:


Output:
CHAPTER 5:  OUTPUT: Apply the Attributes  read-only, disabled and focus
1.Read-only: two text boxes with read-only=on read-only=off
2.Disabled: two text boxes with disabled=on disabled=off
3.Focus: two text boxes with focus=on try three forms with different focus for different elements.
Code:
         
Output:
           
CHAPTER 6:  OUTPUT: Apply the styles 
1.Use style tag
2.Apply css using id and class: Use ID and class to apply different styles
3.Give border : Give border to the text boxes with different sizes and one text box with no border
4.Border color: give different border color to 4 different sizes of input elements
5.Background color: change the background color of the text box and radio  button and check
boxes
Code:


Output:
           
CHAPTER 7:  OUTPUT: Apply the styles 
1.Text box text align: Align the text box text to left and right
Code:


Output:
            
Code:
 


Output:
               


2. Height: Apply 4 different heights to 4 different types of Input controls
Code:


Output:
            

3. Width: Apply 4 different Width to 4 different types of Input controls
Code:

Output:
           
CHAPTER 8:  OUTPUT: Simple Select Box with list of Btech Branches 
1.Select Attribute: Basic Info and use
2.Select and Option Tag: Set multiple options 
3.ID, Name, Class: use default and base attributes
Code:
Output:
CHAPTER 9:  OUTPUT: Design the 3 select box with different sizes
1.Width: This is used to increase the size.
2.Size: This is used to give the size of the text.
3.Disabled: design 2 select box with one disabled = on and one with disabled = off


Code:
Output:
CHAPTER 10:  OUTPUT: Apply the styles 
1.Apply css using id and class: Use ID and class to apply different styles
2.Give border : Give border to the Select Box with different sizes and one text box with no border
3.Border color: give different border color to 4 different sizes of input elements

Output:
CHAPTER 11:  OUTPUT: Design one textarea to enter address
Textarea
1.<textarea> tag
2.Rows: 2 Text areas one with 5 and another with 8 rows
3.Cols: 2 Text areas one with 5 and another with 8 Cols
Eg:
Output:
           
CHAPTER 12:  OUTPUT: Design the 3 select box with different sizes
1.Max-length: Give max-length 100 to char
2.Apply other attributes of Input we discussed in Chapter 4,5
Output:

CHAPTER 13:  OUTPUT: Apply the styles 
1.Apply all the Css of input control to text area
Output:
            
CHAPTER 14: OUTPUT: Display 3 Different Types of buttons normal click button, submit button, reset/cancel button
Button:Different Types of buttons
1.Normal button
The button is a clickable button.                               
2.Submit button
The button is a submit button (submits form-data)                                           
3.Reset Button
The button is a reset button (resets the form data to initial values )                                                                                                                                  
Output:
CHAPTER 15: OUTPUT: Display 3 button and apply the below attributes:
  • Name, ID, Class: Default attributes
  • Value: check how it reads the value 
  • Disabled: display 2 button one with enabled and another with disabled
    
Output:
CHAPTER 16:  OUTPUT: Apply the styles 
1.Apply css using id and class: Use ID and class to apply different styles
2.Color: Change the button color and button background color


Output:
                       
CHAPTER 18: OUTPUT: Learn the syntax and how to write hidden controls will see the live example in from submit section
Syntax: <input type =”hidden”>
1.Hidden tags
Hidden tags are used to secure the data.                                        
2.Input Controls
The input tag specifies an input field where the user can enter the data.
<input> elements are used within a <form> element to declare input controls that allow users to input data.     
3.Why to use
Hidden fields allow us to send all kinds of information along with a form message,
without the user having to be involved in the process.
4.Where to use
Hidden field is used in <input> element where we don’t want show the form-data to the user.
Html form :
<!doctype html>
<html lang="en">
 <head>
  <style>

.margin1
{
margin-left:70px;
}
.image{margin-left:8px;margin-bottom:0px}
.image1{ position: fixed;
 width:200px;
  top: 420px;
  right: 1250px;
bottom:6px;}
td{border-radius:50px;background:transparent}
body{font-family:sans-serif;font-size:10.5px;background-color:#F7F7F7;color:#292929 }
#id1
{
background-color:black;
margin-left:10px;
padding-top:55px;
width:910px;
height:80px;
color: #80ffff;
text-align:center;
}
#child1 {
  position: fixed;
 width:200px;
 height:50px;
  top: 173px;
  right: 1250px;
bottom:6px;

</style>
 </head>
 <body>
<div class="margin2">
<div id="id1" style="margin-left:50px;font-size:30px">
Enter Support Ticket.
</div>
<div class="margin1">
<p style="width:500px;margin-top:25px;font-size:15px;font-family:sans-serif;line-height:2"> Enter your information and a detailed description of the issue.Once completed,submit the form and we will work to resolve the issue</p>
YOUR CONTACT DETAILS
<hr align=left style="width:500px;border:0.5px solid #d6d6c2"><br><br>
<table>
<tr>
<td>Name:<br>
<input type="text"size=30 style="background-color:#ffffb3;border-radius:3px;height:30px;margin-top:3px;border:1.5px solid #ebebe0"><br><br></td>

<td style="padding-left:30px">Company:<br>
<input type="text" size=30 style="border-radius:3px;height:30px;margin-top:3px;border:1.5px solid #ebebe0"  ><br><br></td>
</tr>
<tr>
<td>Email:<br>
<input type="text"size=30 style="border-radius:3px;height:30px;margin-top:3px;border:1.5px solid #ebebe0"><br><br></td>
<td style="padding-left:30px">Phone:<br>
<input type="text"size=30 style="border-radius:3px;height:30px;margin-top:3px;border:1.5px solid #ebebe0"><br><br></td>
</td>
</tr>
</table>
<br>
<br>


SUPPORT TICKET DETAILS
<hr align=left style="width:500px;border:0.5px solid #d6d6c2"><img  class="image1"src="image.jpg" ><br><br>
URL/Web address:<br>
<input style="width:500px;border-radius:3px;height:30px;margin-top:3px;border:1.5px solid #ebebe0"type:"text"><br><br></td>
Page Type:<br>
<select style="border-radius:3px;background-color:#ffffb3;width:200px;height:30px;margin-top:3px;border:1.5px solid #ebebe0">
<option>--select--</option>
<option>Standard Page</option>
<option>Archive Page</option>
<option>Unique Page</option>
<option>Modules Page</option>
</select><img  class="image"style="width:18px;"src="info.png" ><br><br>

Description:<br>
<textarea style="width:500px;height:200px;border-radius:3px;margin-top:3px;border:1.5px solid #ebebe0">
</textarea><br>
<br>
<input style="Background-color:#F2A324;margin-left:420px;width:90px;height:35px;border-radius:5px;border:1.5px solid #ebebe0" type="submit" value="Submit" >
<table id="child1" style="background-color:#E9E9E9;border-radius:5px; box-shadow: 1px 1px 1px 1px #888888;"><tr>
<td style=" font-size:16px; color:#292929; padding:10px 20px 0px 20px; margin-left:80px;line-height:140%;" >
For further assistance please contact your <br> <b style="font-size:18px; color:#ea7e25; padding-top:5px;text-align:center;line-height:150%;">support manager.</b><br><br></td>
</tr>
<tr>
<td style="font-size:12px; color:#292929; text-align:center;line-height:140%" ><b>Office Hours:</b><br>Mon-Fri<br>9am-5pm Central</td>
</tr>
<tr>
<td style="font-size:12px; color:#292929;text-align:center;line-height:140%">Currently it’s <b><iframe src="https://free.timeanddate.com/clock/i3akpnsu/n64/fs12/fc292929/tct/pct/ftb/ts1" frameborder="0" width="60" height="14" allowtransparency="true" style="padding:0px; margin:0px; position:relative; top:3px;"></iframe></b> at our office.<p></p></td>
</tr>
</table>
</table>
</form>
</div>
</div>
 </body>
</html>
output:


                  

Comments

Post a Comment