Hello
Viewers,
Welcome
to code tutorial
Today
we will learn about HTML form with CSS Styling ..!
What is HTML?
HTML is
the standard markup language for creating Web pages. HTML describes
the structure of a Web page. how to display the content is based on HTML elements
which tell the browser. HTML full form is HyperText
Markup Language. HTML consists of a series of elements.
What is
CSS ?
Basically how HTML
elements are to be displayed on screen, paper, or in other media describes by
css. You can saves a lot of work. Best part of css is It can control the
layout of multiple web pages all at once. Cascading Style Sheets is full form
of CSS.
What is use of Css ?
To define
styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes are possible by css. Style (CSS)
kept separate from structure (HTML), means smaller file size. Reduced file size
means reduced bandwidth, which means faster loading time.
What is
form ?
Pages
that your users request using their browser are Web. These pages can be written using a
combination of HTML, client-script, server controls, and server code.
Use of
form ?
Web form
is basically use to collect enquiry, data, file etc. It is a medium that
allows your visitors to get in contact with you and to send information, such
as an order, a catalog request, or even a query, which is passed on to your
database.
Video
Content :
In last
video we created simple html form . in which we create input field, option ,
select radio button and make all field required. That was pretty simple to do I
hope you all did it easily. Now as per I said that we will do css of this form
for styling.
For Css
we need to save file as extension of .css , when file is saved come to main
html and link stylesheet with html file which I showed on video. Then contain
whole form in div ( given any class name to div ) than go to css and do follow
full video as it is. There is nothing to do any other thing you just need to follow
video for any help you can see here full source code.
You can also use the code which we given below
:-
Video Source Code :
<html>
<head>
<title>Registration Form</title>
<link rel="stylesheet" type="text/css"
href="style.css" >
<link rel="preconnect"
href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet">
</head>
<body>
<div class="formbox">
<h2 align="center">Inquiry Form</h2>
<form class="myform">
<input type="text" placeholder="Your Name"
required><br/><br/>
<input type="email" placeholder="Your Email
Address"><br/><br/>
<select id="1" style="color:#fff;
background:#1e1e1e;">
<option value="0">None</option>
<option value="1">Web designing</option>
<option value="2">Graphic designing</option>
<option value="3">Wordpress
development</option>
</select><br/><br/>
<input type="radio" id="male"
name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female"
name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="other"
name="gender" value="other">
<label for="other">Other</label>
<br/><br/>
<input type="tel" placeholder="Your Mobile
No."><br/><br/>
<textarea col="5" rows="5"
placeholder="Your Message"></textarea><br/><br/>
<input type="submit">
</form>
</div>
</body>
</html>
---------------------
Style.css
body{
background-image:url('image.jpg');
font-family: 'Poppins', sans-serif;
}
input{
font-family: 'Poppins';
color:#fff;
}
::placeholder{
color:#fff;
}
.formbox{
background:#1e1e1e;
height:650px;
width:400px;
margin:auto;
padding:10px 20px
10px 20px;
border-radius:30px;
margin-top:50px;
text-align:center;
}
.formbox h2{
color:#fff;
text-transform:capitalize;
}
.myform input{
background:transparent;
border:2px solid
#fff;
border-radius:50px;
margin:5px;
padding:10px 50px
10px 50px;
}
.myform input:hover{
background:transparent;
border:2px solid
#00FF00;
transition:0.5s;
}
.myform textarea{
background:transparent;
border:2px solid
#fff;
border-radius:40px;
margin:10px;
padding:10px 50px
10px 50px;
}
.myform textarea:hover{
background:transparent;
border:2px solid
#00FF00;
}
.myform select{
background:transparent;
border:2px solid
#fff;
border-radius:50px;
margin:5px;
padding:10px 50px
10px 50px;
}
.myform select:hover{
background:transparent;
border:2px solid
#00FF00;
}
.myform label{
color:#fff;
}
.option value{
color:#fff;
}
.myform input[ type = "submit" ]{
margin:5px;
padding:10px 50px
10px 50px;
background:#00FF00;
border:none;
}
.myform input[ type = "submit" ]:hover{
background:transparent;
border:2px solid
#00FF00;
transition:0.5s;
color:#00FF00;
}
---------------------
Image for background
Thank You for give your
time. Stay tuned for next blog..!
0 Comments