Responsive HTML5 form elements with CSS Flexbox

Developer
Torben Colding
Size
4,463 Kb
Views
48,576
  1. Responsive HTML5 form elements with CSS Flexbox Previews
  2. Responsive HTML5 form elements with CSS Flexbox HTML Codes
  3. Responsive HTML5 form elements with CSS Flexbox CSS Codes

How do I make an responsive html5 form elements with css flexbox?

HTML form with responsive web design. Furthermore it's done with CSS Flexbox, so no floats are used at all.. What is a responsive html5 form elements with css flexbox? How do you make a responsive html5 form elements with css flexbox? This script and codes were developed by Torben Colding on 17 October 2022, Monday.

Responsive HTML5 form elements with CSS Flexbox Previews
IQ Test

Responsive HTML5 form elements with CSS Flexbox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive HTML5 form elements with CSS Flexbox</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* Responsive form elements Flexbox layout
*/
/*/////////////// GLOBAL STYLES ////////////////////*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
body { padding: 30px; background: #eee;
}
header { margin-bottom: 5rem;
}
/*/////////////// FONT STYLES ////////////////////*/
html { font-size: 62.5%;
}
body, textarea { font-family: 'Open Sans', sans-serif;
}
h1 { font-size: 3rem;
}
h2 { font-size: 1.6rem;
}
form { font-size: 1.4rem; color: #222;
}
/*/////////////// FORM STYLES ////////////////////*/
form .field-group { display: flex; margin: 0 0 12px 0;
}
form .field-group .label { flex: 1; text-align: right; margin: 0 8px 0 0; padding: 2px 0;
}
form .field-group .field { flex: 3;
}
form .field-group:last-child { display: flex; justify-content: flex-end;
}
form .field-group:last-child .field { max-width: 75%;
}
input, select, textarea { padding: .6rem 1rem; font-size: 1.6rem; border: solid 1px #eee; background: #fff; box-sizing: border-box;
}
textarea { width: 100%;
}
input, select { width: 50%;
}
input[type="radio"],
input[type="checkbox"],
input[type="submit"] { width: auto;
}
/*/////////////// RWD STYLES ////////////////////*/
@media (max-width: 720px) { form .field-group .label { text-align: left; margin: 0; } input, select { width: 60%; }
}
@media (max-width: 480px) { input, select { width: 100%; } input[type="radio"], input[type="checkbox"], input[type="submit"] { width: auto; } form .field-group { display: flex; flex-direction: column; margin: 0 0 6px 0; } form .field-group .label { padding: 0 0 5px 0; margin: 10px 0 0 0; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <header> <h1>Forms</h1> <h2>Responsive HTML5 form elements with CSS Flexbox</h2> </header> <form action="#"> <!--///////////////// TEXT FIELDS ///////////////////--> <div class="field-group"> <label for="text1" class="label">Full Name:</label> <div class="field"> <input name="text1" id="text1" type="text" value="" placeholder="Text field" required> </div> </div> <div class="field-group"> <label for="email1" class="label">Email:</label> <div class="field"> <input name="email1" id="email1" type="email" spellcheck="false" value="" placeholder="Email field" required> </div> </div> <div class="field-group"> <label for="number1" class="label">Age:</label> <div class="field"> <input name="number1" id="number1" type="number" value="" placeholder="Number field"> </div> </div> <div class="field-group"> <label for="url1" class="label">Website URL:</label> <div class="field"> <input name="url1" id="url1" type="url" value="" placeholder="URL field"> </div> </div> <div class="field-group"> <label for="tel1" class="label">Phone:</label> <div class="field"> <input name="tel1" id="tel1" type="tel" value="" placeholder="Tel field"> </div> </div> <div class="field-group"> <label for="date1" class="label">Birthday:</label> <div class="field"> <input name="date1" id="date1" type="datetime-local" value=""> </div> </div> <!--///////////////// TEXTAREA ///////////////////--> <div class="field-group"> <label for="textarea1" class="label">Description:</label> <div class="field"> <textarea id="textarea1" name="textarea1" spellcheck="true" rows="10" cols="50" placeholder="Textarea"></textarea> </div> </div> <!--///////////////// SELECT MENU ///////////////////--> <div class="field-group"> <div class="label">Multiple choice:</div> <div class="field"> <select id="select1" name="select1"> <option value="First Choice">First Choice</option> <option value="Second Choice">Second Choice</option> <option value="Third Choice">Third Choice</option> </select> </div> </div> <!--///////////////// RADIO GROUP ///////////////////--> <div class="field-group"> <div class="label">Single choice:</div> <div class="field"> <div> <input id="radio1" name="radio" type="radio" value="First Choice" checked="checked"> <label for="radio1">First Choice</label> </div> <div> <input id="radio2" name="radio" type="radio" value="Second Choice"> <label for="radio2">Second Choice</label> </div> <div> <input id="radio3" name="radio" type="radio" value="Third Choice"> <label for="radio3">Third Choice</label> </div> </div> </div> <!--///////////////// CHECKBOX GROUP ///////////////////--> <div class="field-group"> <div class="label">Multiple choice:</div> <div class="field"> <div> <input id="check1" name="check1" type="checkbox" value="First Choice"> <label class="check" for="check1">First Choice</label> </div> <div> <input id="check2" name="check2" type="checkbox" value="Second Choice"> <label class="check" for="check2">Second Choice</label> </div> <div> <input id="check3" name="check3" type="checkbox" value="Third Choice"> <label class="check" for="check3">Third Choice</label> </div> </div> </div> <!--///////////////// SUBMIT BUTTON ///////////////////--> <div class="field-group"> <div class="field"> <input id="saveForm" name="saveForm" type="submit" value="Submit"> </div> </div> </form> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Responsive HTML5 form elements with CSS Flexbox - Script Codes CSS Codes

/* Responsive form elements Flexbox layout
*/
/*/////////////// GLOBAL STYLES ////////////////////*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
body { padding: 30px; background: #eee;
}
header { margin-bottom: 5rem;
}
/*/////////////// FONT STYLES ////////////////////*/
html { font-size: 62.5%;
}
body, textarea { font-family: 'Open Sans', sans-serif;
}
h1 { font-size: 3rem;
}
h2 { font-size: 1.6rem;
}
form { font-size: 1.4rem; color: #222;
}
/*/////////////// FORM STYLES ////////////////////*/
form .field-group { display: flex; margin: 0 0 12px 0;
}
form .field-group .label { flex: 1; text-align: right; margin: 0 8px 0 0; padding: 2px 0;
}
form .field-group .field { flex: 3;
}
form .field-group:last-child { display: flex; justify-content: flex-end;
}
form .field-group:last-child .field { max-width: 75%;
}
input, select, textarea { padding: .6rem 1rem; font-size: 1.6rem; border: solid 1px #eee; background: #fff; box-sizing: border-box;
}
textarea { width: 100%;
}
input, select { width: 50%;
}
input[type="radio"],
input[type="checkbox"],
input[type="submit"] { width: auto;
}
/*/////////////// RWD STYLES ////////////////////*/
@media (max-width: 720px) { form .field-group .label { text-align: left; margin: 0; } input, select { width: 60%; }
}
@media (max-width: 480px) { input, select { width: 100%; } input[type="radio"], input[type="checkbox"], input[type="submit"] { width: auto; } form .field-group { display: flex; flex-direction: column; margin: 0 0 6px 0; } form .field-group .label { padding: 0 0 5px 0; margin: 10px 0 0 0; }
}
Responsive HTML5 form elements with CSS Flexbox - Script Codes
Responsive HTML5 form elements with CSS Flexbox - Script Codes
Home Page Home
Developer Torben Colding
Username torbencolding
Uploaded October 17, 2022
Rating 3.5
Size 4,463 Kb
Views 48,576
Do you need developer help for Responsive HTML5 form elements with CSS Flexbox?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Torben Colding (torbencolding) Script Codes
Name
Responsive Pagination
6 CSS Grid Layout Examples
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!