Data Input Form

Developer
Rachel McGrane
Size
8,406 Kb
Views
30,360
  1. Data Input Form Previews
  2. Data Input Form HTML Codes
  3. Data Input Form CSS Codes
  4. Data Input Form JS Codes

How do I make an data input form?

Form concept for a class. Part of a larger mock project for tracking bird migration patterns on green roofs, and what types of birds are eating and interacting with which plants.. What is a data input form? How do you make a data input form? This script and codes were developed by Rachel McGrane on 12 September 2022, Monday.

Data Input Form Previews
IQ Test

Data Input Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Data Input Form</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container cf">
<section class="data-input basic"> <header class="form-title"> <h1>Vegetation Data</h1> <button class="btn btn-info">Advanced Info</button> </header> <form action="" class="data-form cf"> <div class="row"> <label class="common"> <span>Common Name</span> <input type="text" class="form-input"> </label> <label class="scientific"> <span>Scientific Name</span> <input type="text" class="form-input" disabled> </label> </div> <div class="row"> <label> <span>Where?</span> <input type="text" class="form-input"> </label> <label> <span>Type</span> <div id="dd" class="wrapper-dropdown-2">Select type	<ul class="dropdown"> <li><a href="#">Select type</a></li>	</ul>	</div> </label> </div> <div class="row"> <label> <span>Upload a picture</span> <div class="custom-file-upload">	<input type="file" id="file" name="myfiles[]" multiple />	</div> </label> </div> <input type="submit" class="btn btn-submit" value="Submit Info" /> </form>
</section>
<section class="data-input advanced"> <header class="form-title"> <h1>Vegetation Data <span>Advanced</span> </h1> <button class="btn btn-info">Basic Info</button> </header> <form action="" class="data-form cf"> <div class="row"> <label class="color-fruit"> <h2>Fruit <label class="radio-label yes selected">	<input type="radio" name="seed" value="yes" selected /> <span>Yes</span> </label> <label class="radio-label no">	<input type="radio" name="seed" value="no" /> <span>No</span> </label> </h2> <span>Color</span> <input type="text" class="form-input"> </label> <label class="color-seed"> <h2>Seed <label class="radio-label yes selected">	<input type="radio" name="seed" value="yes" selected /> <span>Yes</span> </label> <label class="radio-label no">	<input type="radio" name="seed" value="no" /> <span>No</span> </label> </h2> <span>Color</span> <input type="text" class="form-input"> </label> <label class="color-flower"> <h2>Flower <label class="radio-label yes selected">	<input type="radio" name="seed" value="yes" selected /> <span>Yes</span> </label> <label class="radio-label no">	<input type="radio" name="seed" value="no" /> <span>No</span> </label> </h2> <span>Color</span> <input type="text" class="form-input"> </label> </div> <div class="row"> <label> <span>Sunlight Hours</span> <div id="dd2" class="wrapper-dropdown-2">10	<ul class="dropdown"> <li><a href="#">5</a></li> <li><a href="#">10</a></li>	<li><a href="#">15</a></li>	</ul>	</div> </label> <label> <span>Minimum Precipitation</span> <input type="text" class="form-input"> </label> <label> <span>Root Depth</span> <input type="range" min="5" max="15" value="10" id="depth" onchange="outputUpdate(value)"> <output for="depth" id="feet">10ft</output> </label> </div> <input type="submit" class="btn btn-submit" value="Submit Info" /> </form>
</section>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Data Input Form - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800);
* { box-sizing: border-box;
}
.cf:before,
.cf:after { content: " "; display: table;
}
.cf:after { clear: both;
}
body { font-family: 'Open Sans', sans-serif; line-height: 1.5; background: #fff; margin: 0; padding: 4rem;
}
.btn { border: none; border-radius: 3px; font-family: 'Open Sans', sans-serif; font-weight: 700; padding: .5rem 1rem; cursor: pointer; position: relative;
}
.btn:focus { outline: none;
}
.btn:active { outline: none; border-bottom: 0;
}
.data-input { width: 100%; margin: 0 auto; border-bottom: 2px solid #ccc; background: #efefef; border-radius: 5px; position: relative;
}
.form-title { background: #7dc223; padding: .5rem 1.5rem; overflow: hidden; border-radius: 5px 5px 0 0; border-bottom: 2px solid #6ca81e;
}
.form-title h1 { color: #fff; margin: 0; font-weight: 300; font-size: 2rem; float: left;
}
.form-title .btn-info { float: right; background: #efefef; border-bottom: 2px solid #ccc; color: #777; margin-top: 6px;
}
.form-title .btn-info:hover { background: #e5e5e5;
}
.form-title .btn-info:active { border-bottom: none; top: 2px;
}
.data-form { padding: 1.5rem 1.5rem 3rem;
}
.row { clear: both;
}
.radio-label { float: none; width: auto; padding: 0; position: relative; top: -3px;
}
.radio-label input { display: none;
}
.radio-label span { display: inline-block; padding: .25rem .5rem; background: #dedede; margin: 0 -3px; cursor: pointer; font-weight: 700; font-size: .75rem;
}
.radio-label span:hover { background: #ccc;
}
.radio-label.yes span { border-radius: 3px 0 0 3px; margin-left: .5rem;
}
.radio-label.no span { border-radius: 0 3px 3px 0;
}
.radio-label.selected span { background: #7dc223; color: #fff;
}
label { float: left; width: 33.33%; padding: 1rem;
}
label span { display: block; font-size: .875rem; font-weight: 700; color: #777; padding-bottom: 5px;
}
.form-input { padding: .5rem; border-radius: 3px; border: 2px solid #ccc; color: #555; width: 100%; font-family: 'Open Sans', sans-serif; font-size: 1rem; line-height: 1.5;
}
.form-input:focus { border: 2px solid #7dc223; outline: none;
}
.common input { border-radius: 3px 0 0 3px;
}
.scientific { margin-left: -1rem; padding-left: 0; padding-right: 0;
}
.scientific input { border-left: 0; border-radius: 0 3px 3px 0; background: #efefef; border-color: #d5d5d5;
}
.btn-submit { position: absolute; left: 50%; margin-left: -78px; bottom: -25px; background: #7dc223; color: #fff; padding: 1rem 2rem; border-bottom: 2px solid #6ca81e; font-size: 1rem; font-weight: 700;
}
.btn-submit:hover { background: #75b521;
}
.btn-submit:active { bottom: -27px;
}
ul { margin: 0; padding: 0;
}
.wrapper-dropdown-2 { position: relative; width: 100%; padding: .5rem; background: #fff; border: 2px solid #ccc; border-radius: 3px; cursor: pointer; outline: none; color: #555; font-size: 1rem;
}
.wrapper-dropdown-2:after { content: ""; width: 0; height: 0; position: absolute; right: 16px; top: 50%; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #aaa transparent;
}
.wrapper-dropdown-2 .dropdown { position: absolute; top: 100%; right: -2px; left: -2px; background: white; border: 2px solid #ccc; transition: all 0.3s ease-out; list-style: none; opacity: 0; pointer-events: none; border-radius: 0 0 3px 3px; z-index: 100;
}
.wrapper-dropdown-2 .dropdown li a { display: block; text-decoration: none; color: #555; padding: .5rem; background: #dedede; transition: all 0.3s ease-out;
}
/* Hover state */
.dropdown li:hover a { background: #d0d0d0;
}
.wrapper-dropdown-2.active:after { border-width: 0 6px 6px 6px;
}
.wrapper-dropdown-2.active .dropdown { opacity: 1; pointer-events: auto;
}
.custom-file-upload-hidden { display: none; visibility: hidden; position: absolute; left: -9999px;
}
.custom-file-upload { display: block; width: auto; font-size: 1rem; line-height: 1.5;
}
.file-upload-wrapper { position: relative; overflow: hidden; width: 100%;
}
.file-upload-input { border-radius: 3px; width: 100%; color: #555; font-size: 1rem; line-height: 1.5rem; padding: .5rem; border: 2px solid #ccc; background-color: #fff; float: left; /* IE 9 Fix */
}
.file-upload-input:hover, .file-upload-input:focus { outline: none;
}
.file-upload-input:focus { border: 2px solid #7dc223;
}
.file-upload-button { font-family: 'Open Sans', sans-serif; font-weight: 700; cursor: pointer; display: inline-block; position: absolute; right: 5px; top: 5px; color: #fff; font-size: .875rem; padding: .4rem .75rem; border: 0; border-bottom: 2px solid #6ca81e; margin-left: -1px; background: #7dc223; border-radius: 3px;
}
.file-upload-button:hover { background-color: #6ca81e;
}
.form-title span { font-size: .875rem; font-weight: 700; padding: 0 .5rem; color: rgba(255, 255, 255, 0.7); display: inline-block; position: relative;
}
.container { position: relative; -webkit-perspective: 1600px; -moz-perspective: 1600px; width: 60%; margin: 0 auto;
}
.container .basic { height: inherit; position: absolute; top: 0; z-index: 900; -webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out;
}
.container .advanced { height: inherit; position: absolute; top: 0; z-index: 1000; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out;
}
.container.flip .basic { z-index: 900; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg);
}
.container.flip .advanced { z-index: 1000; -webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg);
}
h2 { margin: 0; font-weight: 300; padding-bottom: .75rem;
}
.basic { width: 75%; left: 50%; margin-left: -37%;
}
.basic label { width: 50%;
}
input[type=range] { /*removes default webkit styles*/ -webkit-appearance: none; /*required for proper track sizing in FF*/ width: 100%; background: none; margin-top: 0; position: relative; top: -10px;
}
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; background: #ccc; border: none; border-radius: 3px 3px 0 0;
}
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; height: 16px; width: 16px; border-radius: 50%; background: #7dc223; margin-top: -4px; cursor: pointer; position: relative; z-index: 500;
}
input[type=range]:focus { outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track { background: #ccc;
}
input[type=range]::-moz-range-track { width: 300px; height: 5px; background: #ddd; border: none; border-radius: 3px;
}
input[type=range]::-moz-range-thumb { border: none; height: 16px; width: 16px; border-radius: 50%; background: goldenrod;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring { outline: 1px solid #efefef; outline-offset: -1px;
}
output { background: #f5f5f5; border: 2px solid #ccc; border-top: 0; display: block; border-radius: 0 0 3px 3px; margin: -16px 0 0 2px; padding: 6px .5rem 7px; font-size: .875rem; font-weight: 700; color: #777; text-align: right; width: 100%; position: relative;
}
output::after { content: "Depth:"; position: absolute; left: .5rem; font-weight: normal;
}

Data Input Form - Script Codes JS Codes

(function($) { // Browser supports HTML5 multiple file? var multipleSupport = typeof $('<input/>')[0].multiple !== 'undefined', isIE = /msie/i.test( navigator.userAgent ); $.fn.customFile = function() { return this.each(function() { var $file = $(this).addClass('custom-file-upload-hidden'), // the original file input $wrap = $('<div class="file-upload-wrapper">'), $input = $('<input type="text" class="file-upload-input" />'), // Button that will be used in non-IE browsers $button = $('<button type="button" class="file-upload-button">Select a File</button>'), // Hack for IE $label = $('<label class="file-upload-button" for="'+ $file[0].id +'">Select a File</label>'); // Hide by shifting to the left so we // can still trigger events $file.css({ position: 'absolute', left: '-9999px' }); $wrap.insertAfter( $file ) .append( $file, $input, ( isIE ? $label : $button ) ); // Prevent focus $file.attr('tabIndex', -1); $button.attr('tabIndex', -1); $button.click(function () { $file.focus().click(); // Open dialog }); $file.change(function() { var files = [], fileArr, filename; // If multiple is supported then extract // all filenames from the file array if ( multipleSupport ) { fileArr = $file[0].files; for ( var i = 0, len = fileArr.length; i < len; i++ ) { files.push( fileArr[i].name ); } filename = files.join(', '); // If not supported then just take the value // and remove the path to just show the filename } else { filename = $file.val().split('\\').pop(); } $input.val( filename ) // Set the value .attr('title', filename) // Show filename in title tootlip .focus(); // Regain focus }); $input.on({ blur: function() { $file.trigger('blur'); }, keydown: function( e ) { if ( e.which === 13 ) { // Enter if ( !isIE ) { $file.trigger('click'); } } else if ( e.which === 8 || e.which === 46 ) { // Backspace & Del // On some browsers the value is read-only // with this trick we remove the old input and add // a clean clone with all the original events attached $file.replaceWith( $file = $file.clone( true ) ); $file.trigger('change'); $input.val(''); } else if ( e.which === 9 ){ // TAB return; } else { // All other keys return false; } } }); }); }; // Old browser fallback if ( !multipleSupport ) { $( document ).on('change', 'input.customfile', function() { var $this = $(this), // Create a unique ID so we // can attach the label to the input uniqId = 'customfile_'+ (new Date()).getTime(), $wrap = $this.parent(), // Filter empty input $inputs = $wrap.siblings().find('.file-upload-input') .filter(function(){ return !this.value }), $file = $('<input type="file" id="'+ uniqId +'" name="'+ $this.attr('name') +'"/>'); // 1ms timeout so it runs after all other events // that modify the value have triggered setTimeout(function() { // Add a new input if ( $this.val() ) { // Check for empty fields to prevent // creating new inputs when changing files if ( !$inputs.length ) { $wrap.after( $file ); $file.customFile(); } // Remove and reorganize inputs } else { $inputs.parent().remove(); // Move the input so it's always last on the list $wrap.appendTo( $wrap.parent() ); $wrap.find('input').focus(); } }, 1); }); }
}(jQuery));
$('input[type=file]').customFile();	function DropDown(el) {	this.dd = el;	this.initEvents();	}	DropDown.prototype = {	initEvents : function() {	var obj = this;	obj.dd.on('click', function(event){	$(this).toggleClass('active');	event.stopPropagation();	});	}	}	$(function() {	var dd = new DropDown( $('#dd') );	$(document).click(function() {	// all dropdowns	$('.wrapper-dropdown-2').removeClass('active');	});	});	$(function() {	var dd = new DropDown( $('#dd2') );	$(document).click(function() {	// all dropdowns	$('.wrapper-dropdown-2').removeClass('active');	});	});	// set up hover panels	// although this can be done without JavaScript, we've attached these events	// because it causes the hover to be triggered when the element is tapped on a touch device	$('.btn-info').click(function(){	$('.container').toggleClass('flip');	});
function outputUpdate(vol) {
document.querySelector('#feet').value = vol + "ft";
}
Data Input Form - Script Codes
Data Input Form - Script Codes
Home Page Home
Developer Rachel McGrane
Username rachelmcgrane
Uploaded September 12, 2022
Rating 3
Size 8,406 Kb
Views 30,360
Do you need developer help for Data Input Form?

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!

Rachel McGrane (rachelmcgrane) Script Codes
Name
Gmail Icon Animation
Audio Player WIP
Site Header
Pride Flags
Kerbal Space Program Buy Button
Bumble Coming Soon Page
SVG Audio Wave Loader
Angular-Meteor Showcase
Wireframe Concept
Ship Name Lookup
Create amazing sales emails 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!