Form

Developer
Khoné Vongsouthi
Size
4,172 Kb
Views
20,240
  1. Form Previews
  2. Form HTML Codes
  3. Form CSS Codes
  4. Form JS Codes

How do I make an form?

What is a form? How do you make a form? This script and codes were developed by Khoné Vongsouthi on 02 December 2022, Friday.

Form Previews
IQ Test

Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Form</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<div class="row">	<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">	<div id="scroll" data-spy="scroll" data-target="#navbar-example">	<form class="form-horizontal" name="form" method="post" action="#">	<fieldset id="fieldsetText">	<legend>Text</legend>	<div class="form-group">	<label for="formText" class="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label">Text: <sup>*</sup></label>	<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10">	<input type="text" class="form-control" id="formText" placeholder="" value="" aria-describedby="formTextHelp" />	<small id="formTextHelp" class="help-block">Lorem ipsum dolor sit amet</small>	</div>	</div>	<div class="form-group has-error has-feedback">	<label for="formTextError" class="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label">Text: <sup>*</sup></label>	<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10">	<input type="text" class="form-control" id="formTextError" placeholder="" value="" aria-describedby="formTextErrorHelp" describedby="formTextErrorStatus" />	<small id="formTextErrorHelp" class="help-block">Lorem ipsum dolor sit amet</small>	<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>	<span id="formTextErrorStatus" class="sr-only">(error)</span>	</div>	</div>	<div class="form-group has-success has-feedback">	<label for="formTextSuccess" class="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label">Text: <sup>*</sup></label>	<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10">	<input type="text" class="form-control" id="formTextSuccess" placeholder="" value="" aria-describedby="formTextSuccessHelp" describedby="formTextSuccessStatus" />	<small id="formTextSuccessHelp" class="help-block">Lorem ipsum dolor sit amet</small>	<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>	<span id="formTextSuccessStatus" class="sr-only">(success)</span>	</div>	</div>	<div class="form-group">	<label for="formTextDisabled" class="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label">Text: <sup>*</sup></label>	<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10">	<input type="text" class="form-control" id="formTextDisabled" placeholder="" value="" aria-describedby="formTextDisabledHelp" disabled />	<small id="formTextDisabledHelp" class="help-block">Lorem ipsum dolor sit amet</small>	</div>	</div>	</fieldset>	<fieldset id="fieldsetEmail">	<legend>Email</legend>	<div class="form-group">	<label for="formText" class="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label">Email: <sup>*</sup></label>	<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10">	<input type="email" class="form-control" id="formEmail" placeholder="" value="" aria-describedby="formEmailHelp" />	<small id="formEmailHelp" class="help-block">Lorem ipsum dolor sit amet</small>	</div>	</div>	<div class="form-group has-error has-feedback">	<label for="formEmailError" class="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label">Email: <sup>*</sup></label>	<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10">	<input type="email" class="form-control" id="formEmailError" placeholder="" value="" aria-describedby="formEmailErrorHelp" describedby="formEmailErrorStatus" />	<small id="formEmailErrorHelp" class="help-block">Lorem ipsum dolor sit amet</small>	<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>	<span id="formEmailErrorStatus" class="sr-only">(error)</span>	</div>	</div>	<div class="form-group has-success has-feedback">	<label for="formEmailSuccess" class="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label">Email: <sup>*</sup></label>	<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10">	<input type="email" class="form-control" id="formEmailSuccess" placeholder="" value="" aria-describedby="formEmailSuccessHelp" describedby="formEmailSuccessStatus" />	<small id="formEmailSuccessHelp" class="help-block">Lorem ipsum dolor sit amet</small>	<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>	<span id="formEmailSuccessStatus" class="sr-only">(success)</span>	</div>	</div>	<div class="form-group">	<label for="formEmailDisabled" class="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label">Email: <sup>*</sup></label>	<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10">	<input type="email" class="form-control" id="formEmailDisabled" placeholder="" value="" aria-describedby="formEmailDisabledHelp" disabled />	<small id="formEmailDisabledHelp" class="help-block">Lorem ipsum dolor sit amet</small>	</div>	</div>	</fieldset>	<fieldset id="fieldsetInput">	<legend>Input</legend>	<div class="form-group">	<label for="formPassword" class="col-sm-2 control-label">Password:</label>	<div class="col-sm-9">	<input type="password" class="form-control" id="formPassword" placeholder="" value="" />	</div>	</div>	<div class="form-group">	<label for="formTel" class="col-sm-2 control-label">Tel:</label>	<div class="col-sm-3">	<input type="tel" class="form-control" id="formTel" placeholder="" value="" />	</div>	</div>	<div class="form-group">	<label for="formUrl" class="col-sm-2 control-label">Url:</label>	<div class="col-sm-9">	<input type="url" class="form-control" id="formUrl" placeholder="" value="" />	</div>	</div>	<div class="form-group">	<label for="formDate" class="col-sm-2 control-label">Date:</label>	<div class="col-sm-3">	<input type="date" class="form-control" id="formDate" placeholder="" value="" />	</div>	</div>	<div class="form-group">	<label for="formTime" class="col-sm-2 control-label">Time:</label>	<div class="col-sm-3">	<input type="time" class="form-control" id="formTime" placeholder="" value="" />	</div>	</div>	<div class="form-group">	<label for="formColor" class="col-sm-2 control-label">Color:</label>	<div class="col-sm-3">	<input type="color" class="form-control" id="formColor" placeholder="" value="" />	</div>	</div>	<div class="form-group">	<label for="formNumber" class="col-sm-2 control-label">Number:</label>	<div class="col-sm-3">	<input type="number" class="form-control" id="formNumber" placeholder="" value="" />	</div>	</div>	</fieldset>	<fieldset id="fieldsetSelect">	<legend>Select</legend>	<div class="form-group">	<label for="formSelect" class="col-sm-2 control-label">Select:</label>	<div class="col-sm-9">	<select class="form-control" id="formSelect">	<option>1</option>	<option>2</option>	<option>3</option>	<option>4</option>	<option>5</option>	</select>	</div>	</div>	<div class="form-group">	<label for="formSelect" class="col-sm-2 control-label">Multiple:</label>	<div class="col-sm-9">	<select multiple class="form-control" id="formSelect">	<option>1</option>	<option>2</option>	<option>3</option>	<option>4</option>	<option>5</option>	</select>	</div>	</div>	</fieldset>	<fieldset id="fieldsetCheckbox">	<legend>Checkbox & Radio</legend>	<div class="form-group">	<span class="col-sm-2 control-label">Checkbox:</span>	<div class="col-sm-9">	<label for="inlineCheckbox1" class="checkbox-inline">	<input type="checkbox" id="inlineCheckbox1" value="option1"> 1	</label>	<label for="inlineCheckbox2" class="checkbox-inline">	<input type="checkbox" id="inlineCheckbox2" value="option2"> 2	</label>	<label for="inlineCheckbox3" class="checkbox-inline">	<input type="checkbox" id="inlineCheckbox3" value="option3"> 3	</label>	</div>	</div>	<div class="form-group">	<span class="col-sm-2 control-label">Radio:</span>	<div class="col-sm-9">	<label for="inlineRadio1" class="radio-inline">	<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1	</label>	<label for="inlineRadio2" class="radio-inline">	<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2	</label>	<label for="inlineRadio3" class="radio-inline">	<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3	</label>	</div>	</div>	</fieldset>	<fieldset id="fieldsetTextarea">	<legend>Textarea</legend>	<div class="form-group">	<label for="formTextarea" class="col-sm-2 control-label">Textarea:</label>	<div class="col-sm-9">	<textarea id="formTextarea" class="form-control" rows="3"></textarea>	</div>	</div>	</fieldset>	<fieldset id="fieldsetFile">	<legend>File</legend>	<div class="form-group">	<label for="formFile" class="col-sm-2 control-label">File:</label>	<div class="col-sm-9">	<input type="file" class="form-control" id="formFile" placeholder="" value="" />	</div>	</div>	</fieldset>	<div class="form-group">	<div class="col-sm-offset-2 col-sm-9">	<button type="submit" class="btn btn-default">Submit</button>	</div>	</div>	</form>	</div>	</div>	<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">	<div id="myAffix" data-spy="affix" data-offset-top="0" data-offset-bottom="0">	<div id="navbar-example">	<ul class="nav nav-pills nav-stacked">	<li role="presentation">	<a href="#fieldsetText">Text</a>	</li>	<li role="presentation">	<a href="#fieldsetEmail">Email</a>	</li>	<li role="presentation">	<a href="#fieldsetInput">Input</a>	</li>	<li role="presentation">	<a href="#fieldsetSelect">Select</a>	</li>	<li role="presentation">	<a href="#fieldsetCheckbox">Checkbox</a>	</li>	<li role="presentation">	<a href="#fieldsetTextarea">Textarea</a>	</li>	<li role="presentation">	<a href="#fieldsetFile">File</a>	</li>	</ul>	</div>	</div>	</div>	</div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Form - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Ek+Mukta:700|Muli:200,300,400");
html,
body { height: auto; font-size: 12px; line-height: 16px;
}
figure { margin: 0;
}
h1, .h1 { margin-top: 0; margin-bottom: 0;
}
/*============================== FORM
-------------------------------*/
form { margin: 30px 0;
}
fieldset { display: block; margin: 0; padding: 30px 0;
}
legend { display: block; margin: 0; padding: 0; width: 100%; font-size: 18px; line-height: 22px;
}
.form-horizontal .control-label { padding-top: 9px;
}
.form-control { padding: 5px 10px; height: 35px; font-size: inherit; line-height: 37px; outline: 0; border-radius: 0; box-shadow: none;
}
.form-control:focus, .form-control:hover, .form-control:active { border-color: steelblue; outline: 0; box-shadow: none;
}
.form-control:focus:focus, .form-control:focus:hover, .form-control:focus:active, .form-control:hover:focus, .form-control:hover:hover, .form-control:hover:active, .form-control:active:focus, .form-control:active:hover, .form-control:active:active { outline: 0; box-shadow: none;
}
.help-block { margin-top: 3px; margin-bottom: 0; font-size: 11px; line-height: 15px;
}

Form - Script Codes JS Codes

$(function () { $('[data-toggle="tooltip"]').tooltip();	$('#myAffix').affix({	offset: {	top: 0,	bottom: function () {	return ( this.bottom = $('.footer').outerHeight(true) );	}	}	});
});
Form - Script Codes
Form - Script Codes
Home Page Home
Developer Khoné Vongsouthi
Username khone-vongsouthi
Uploaded December 02, 2022
Rating 3
Size 4,172 Kb
Views 20,240
Do you need developer help for 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!

Khoné Vongsouthi (khone-vongsouthi) Script Codes
Name
Slider
Datepicker
Title with adaptative background
Button - Center middle
Menu in columns
Map
Jumbotron
Language - Selector
Social navigation in pure CSS3
Tooltip
Create amazing captions 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!