...

Web Technologies - CSS

Back to Course

Lesson Description


Lession - #187 CSS Inputs


Input "password" type



<html>
    <div class="title">
    <h2>Input "password" type</h2>
    </div>

<style type="text/css">
    .container-fluid
    {
        background-color: #e000e0;
        

        }

    .border1
    {
        border: solid 1px black;
        padding: 20px;
        background-color:#ffdb58;


    }

   
    
</style>
<body>
   <div class="border1">

      <div class="container-fluid">
        <h2>Input Form</h2>
      </div>
<form>  
    <label>Enter User name</label> 
    <input type="text" name="firstname"><br>  
    <label>Enter Password</label> 
    <input type="Password" name="password"> 
    <br><input type="submit" value="submit">  
</form>
</div>
</body>
</html>




Output:
Sorry cannot be displayed
Try it here




Input "submit" type

                     
     <!DOCTYPE html>
        <html>
        <head>

    <h2>Input "email" type</h2>
  

    <style type="text/css">
    
        .green{
            background-color: #f4bbff;
            border: solid 1px black;
        padding: 20px;
        }
    </style>
  </head>

  <body>
      
    <div class="green">
       <body>
    <h3>Input "submit" type:</h3>
  <form action="CSS_Inputs.php">
    <label>Enter User name</label><br>
    <input type="text" name="firstname"><br>
    <label>Enter Password</label><br>
    <input type="Password" name="password"><br>
    <br><input type="submit" value="submit">
  </form>
   <p>After pressing the submit button, the form will be sent to the server and the page will be redirected to the action value. </p>
 </body>
</div>
  </body>

</html>



Output:
Sorry cannot be displayed
Try it here



Radio Buttons and Checkboxes

                     
     

<html>
<head>

<style type="text/css">
    .container-fluid
    {
        background-color: #e000e0;
        

        }

    .border2
    {
        border: solid 1px black;
        padding: 20px;
        background-color: #7aff7a;


    }

   
    
</style>
</head>
<body>
<div class="border2">


<form>
  Username:<input type="text" name="username"/>
  <p></p>
  Password:<input type="password" name="password"/>
 <p></p>

<h3>Radio Buttons and Checkboxes:</h3>
 Gender:<br>
 <input type="radio" name="gender"/>Male<br>
  <input type="radio" name="gender"/>Female<br>
<br>
  Checkboxes:<br>

  <input type="checkbox" name="fruit"/>Fruit
  <br>
  <input type="checkbox" name="salad"/>Salad
</form>
</div>
</div>
</body>
</html>



Output:
Sorry cannot be displayed
Try it here