Scribd
Upload
33 views6 pages

The Selector Selects All Elements

This document defines the styling for a basic HTML form with first name, last name, country, and subject fields. Styling is applied using CSS to make the form responsive on different screen sizes. Float and clear properties are used to position form elements in columns, and media queries make the columns stack vertically on small screens.

Uploaded by

Maryam Abdul Razzak
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
33 views6 pages

The Selector Selects All Elements

This document defines the styling for a basic HTML form with first name, last name, country, and subject fields. Styling is applied using CSS to make the form responsive on different screen sizes. Float and clear properties are used to position form elements in columns, and media queries make the columns stack vertically on small screens.

Uploaded by

Maryam Abdul Razzak
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

DOCTYPE html>

<html>

<head>

<style>

*{ // The * selector selects all elements.

box-sizing: border-box;

input[type=text], select, textarea {

width: 100%;

padding: 12px;

border: 1px solid #ccc;

border-radius: 4px;

resize: vertical;

label {

padding: 12px 12px 12px 0;

display: inline-block;

input[type=submit] {

background-color: #4CAF50;

color: white;

padding: 12px 20px;

border: none;

border-radius: 4px;

cursor: pointer;

float: right;
}

input[type=submit]:hover {

background-color: #45a049;

.container {

border-radius: 5px;

background-color: #f2f2f2;

padding: 20px;

.col-25 {

float: left;

width: 25%;

margin-top: 6px;

.col-75 {

float: left;

width: 75%;

margin-top: 6px;

/* Clear floats after the columns */

.row:after {

content: "";

display: table;

clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of
each other instead of next to each other */

@media screen and (max-width: 600px) {

.col-25, .col-75, input[type=submit] {

width: 100%;

margin-top: 0;

</style>

</head>

<body>

<div class="container">

<form action=""> // you can add page here thanks.html

<div class="row">

<div class="col-25">

<label for="fname">First Name</label>

</div>

<div class="col-75">

<input type="text" id="fname" name="firstname" placeholder="Your name..">

</div>

</div>

<div class="row">

<div class="col-25">

<label for="lname">Last Name</label>


</div>

<div class="col-75">

<input type="text" id="lname" name="lastname" placeholder="Your last name..">

</div>

</div>

<div class="row">

<div class="col-25">

<label for="country">Country</label>

</div>

<div class="col-75">

<select id="country" name="country">

<option value="australia">Australia</option>

<option value="canada">Canada</option>

<option value="usa">USA</option>

</select>

</div>

</div>

<div class="row">

<div class="col-25">

<label for="subject">Subject</label>

</div>

<div class="col-75">

<textarea id="subject" name="subject" placeholder="Write something.."


style="height:200px"></textarea>

</div>

</div>

<div class="row">

<input type="submit" value="Submit" onclick="alert('Hello World!')">

<!--- <button type="button" onclick="alert('Hello World!')">Click Me!</button> -->


</div>

</form>

</div>

</body>

</html>

The clear property specifies on which sides of an element floating elements are
not allowed to float.

Value Description

none Default. Allows floating elements on both sides

left No floating elements allowed on the left side

right No floating elements allowed on the right side

both No floating elements allowed on either the left or the right side

The display property specifies the display behavior (the type of rendering box)
of an element.
display: none/inline/block/inline-block

You might also like