HTML forms can be styled using CSS. You can use CSS to control the layout, fonts, colors, and other visual aspects of form elements such as input fields, checkboxes, and buttons.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<div class="f">
<form>
<label>Name: </label>
<input type="text" id="name" name="name">
<label>Last Name: </label>
<input type="text" id="lastname" name="lastname">
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
This HTML code creates a simple form that includes two input fields for the user's name and last name, along with a submit button.
The form is contained within a div element that has a class of "f", and an external CSS file is linked to the HTML page using the link tag in the head section.
.f {
max-width: 500px;
border: 2px solid black;
background: yellow;
padding: 5px;
margin: 5px;
}
input[type="text"] {
width: 95%;
padding: 5px;
margin: 5px;
display: block;
}
input[type="submit"] {
padding: 5px;
margin: 5px;
display: block;
}
This CSS code is styling an HTML form with a class of "f" and contains two text input fields and a submit button.
The ".f" class sets a maximum width of 500px, adds a 2px solid black border, and sets a yellow background color with 5px of padding and margin.
The "input[type='text']" selector applies styles to all text input fields, setting the width to 95%, adding 5px of padding and margin, and displaying them as blocks.
The "input[type='submit']" selector applies styles to the submit button, adding 5px of padding and margin, and displaying it as a block.
No comments:
Post a Comment