How to create an HTML form? | How to style an HTML form?

How to create an HTML form? | How to style an HTML form?

How to create an HTML form? , How to style an HTML form?, codewithrandom

Hello guys welcome to Code With Random blog, today we learn
How to create an HTML form and How to style an HTML form. We use labels, name input, password, email inputs and the last one is submit button.

Creating HTML form | simple HTML form for beginners


1. Setup our form tag

   <form action="#">  
   </form>  
We add all our form code in this form tag so our 1st step is to create a form tag in an HTML document. now we start adding our inputs felids into this form tag.

2. Start with Name inputs

  <label for="firstname">First name:</label><br>                                        
  <input type="text" id="firstname" name="firstname" placeholder="Enter your name"><br><br>  

We use label for better styling and use input Or type text and give a id so we target especially this element then use Placeholder for user easy understanding. And our input field is ready for filling text.

Output

How to create an HTML form? , How to style an HTML form?, codewithrandom
Label with input field

3. Password input

  <label for="pwd">Password:</label><br><br>  
  <input type="password" name="pwd" id="pwd" min-length="8"><br><br>  

We use the label in a password as we use in name input also use a name for when we collect data in backend so that makes easy also we use min-length for minimum password. We use min-length for 8 characters that are the user must enter 8 characters.

Output

How to create an HTML form? , How to style an HTML form?, codewithrandom
Label with password input field

Javascript project ideas with complete source code 

4. File upload button

  <input type="file" name="file" id="file">  
We use input type files so users upload any type of files and if we want a specific file from a user like pdf, jpeg so we use accept attributes so user can upload only specific flies.

Output
How to create an HTML form? , How to style an HTML form?, codewithrandom
Label with input file field

5. Radio button

  <p>Comment on this blog</p>  
  <input type="radio" id="like" name="like" value="like">   
  <label for="like">Yes</label><br>  
   <input type="radio" id="like" name="like" value="like">   
   <label for="like">no</label><br><br>  
We use the p tag for user simplicity so the user selects a radio button. Then we use input type radio for radio button & use label for selecting elements


Output

How to create an HTML form? , How to style an HTML form?, codewithrandom
Label with input type radio 

6. Email Address

  <label for="email">Enter your email</label><br>  
  <input type="email" id="mail" placeholder="Enter your mail id"><br>  
We use input type email for email submission so user enter their mail id and also use a placeholder for better understanding.


Output
How to create an HTML form? , How to style an HTML form?, codewithrandom
Label with input type email

7. Buttons

  <input type="submit" class="button">  

We use an input type button for form submit and a class for button so we give styling to our button.


Output
How to create an HTML form? , How to style an HTML form?, codewithrandom
 Simple button with class

Javascript project ideas with complete source code 

Final output of our form

How to create an HTML form? , How to style an HTML form?, codewithrandom
Simple HTML form

Styling HTML Form

 *,*:befor, *:after{  
  box-sizing: border-box;  
 }  
 body{  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
  display: grid;  
  place-items: center;  
  background-color: #8ec5fc;  
  background-image: linear-gradient(62deg,#8ec5fc 0%,#e0c3fc 100%);  
 }  
 input[type=text]{  
  padding: 10px;  
  margin: 10px 0;  
 box-shadow: 0 0 15px 4px rgba(0,0,0,0.0.6);  
 border-radius: 10px;  
  border: 2px solid #eee;  
 }  
 input[type=password]{  
  padding: 10px;  
  margin: 10px 0;  
 box-shadow: 0 0 15px 4px rgba(0,0,0,0.0.6);  
 border-radius: 10px;  
  border: 2px solid #eee;  
 }  
 input[type=email]{  
  padding: 10px;  
  margin: 10px 0;  
 box-shadow: 0 0 15px 4px rgba(0,0,0,0.0.6);  
 border-radius: 10px;  
  border: 2px solid #eee;  
 }  
 input[type=file]{  
  padding: 10px;  
  margin: 10px 0;  
 box-shadow: 0 0 15px 4px rgba(0,0,0,0.0.6);  
 border-radius: 10px;  
  border: 2px solid #eee;  
 }  
 .button{  
  background-color: #4caf50;  
  border: none;  
  border-radius: 10px;  
  padding: 15px 30px;  
  margin: 2px 4px;  
  cursor: pointer;  
 }  
 ::placeholder{  
  color: green;  
 }  

We use input and then type tag and style every element. Give margins & padding to input field. Also we style our button so and target Placeholder Using simple css. You can style in your way that's just simple steps to create and styling our form.


Final output of our form

4 Comments

Post a Comment

Previous Post Next Post