Form Elements

Developer
Sicontis
Size
2,907 Kb
Views
52,624
  1. Form Elements Previews
  2. Form Elements HTML Codes
  3. Form Elements CSS Codes
  4. Form Elements JS Codes

How do I make an form elements?

What is a form elements? How do you make a form elements? This script and codes were developed by Sicontis on 12 July 2022, Tuesday.

Form Elements Previews
IQ Test

Form Elements - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Form Elements</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container" id="app"> <h2>INPUT: TEXT</h2> <div class="form-item"> <div class="form-group"> <input id="fname" type="text" class="text"> <label for="fname">First Name</label> </div> <div class="form-group"> <input id="lname" type="text" class="text"> <label for="lname">Last Name</label> </div> </div> <h2>INPUT: RADIO</h2> <div class="form-item"> <div class="form-group"> <input id="male" type="radio" class="radio" name="gender"> <label for="male">Male</label> </div> <div class="form-group"> <input id="female" type="radio" class="radio" name="gender"> <label for="female">Female</label> </div> </div> <h2>INPUT: CHECKBOX</h2> <div class="form-item cb"> <div class="form-group"> <input id="iphone" type="checkbox" class="checkbox" name="mac"> <label for="iphone">iphone</label> </div> <div class="form-group"> <input id="ipod" type="checkbox" class="checkbox" name="mac"> <label for="ipod">ipod</label> </div> <div class="form-group"> <input id="ipad" type="checkbox" class="checkbox" name="mac"> <label for="ipad">ipad</label> </div> <div class="form-group"> <input id="macbook" type="checkbox" class="checkbox" name="mac"> <label for="macbook">macbook</label> </div> </div> <h2>INPUT: SELECT</h2> <div class="form-item"> <div class="form-group"> <label for="credit" class="dropdown"> <select name="credit" id="credit"> <option value="1"><span>Visa</span></option> <option value="2">Mastercard</option> <option value="3">American Express</option> <option value="4">Diners</option> </select> </label> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Form Elements - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,700');
body { background-color: #313439; color: #FFFFFF; font-family: 'Nunito Sans', 'FontAwesome', sans-serif;
}
h2 { font-size: 1.4em; padding: 10px; margin: 30px 0; border-bottom: 1px dotted #D84E5B;
}
.container { width: 80%; margin: 30px auto;
}
.form-item { padding: 20px; display: flex;
}
.cb { flex-direction: column;
}
.form-group { width: 300px; padding: 20px; position: relative; display: flex; flex-direction: column; flex-wrap: wrap;
}
/* TEXT INPUT
-------------------------------*/
.text { order: 2; width: 90%; border: none; outline: none; background: none; font-size: 1em; color: rgba(237,237,237,.7); border-bottom: 1px dotted rgba(237,237,237,.7); transition: all .2s;
}
.text + label { order: 1; margin-bottom: 10px; font-size: .8em; text-transform: uppercase; letter-spacing: .150em; opacity: .7; transition: all .2s;
}
.text:focus { border-bottom: 1px dotted #D84E5B; font-size: 1.2em;
}
.text:focus + label { font-size: .7em;
}
/* RADIO INPUT
-------------------------------*/
.radio { opacity: 0;
}
.radio + label { display: flex; align-items: center;
}
.radio + label:before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 100px; border: 4px solid; transition: all .2s;
}
.radio:checked + label:before { transform: scale(1.3); border-color: #D84E5B;
}
.checkbox { opacity: 0;
}
.checkbox + label { display: flex; align-items: center; text-transform: uppercase;
}
.checkbox + label:before { content: "\f096"; margin-right: 10px; transition: all .3s;
}
.checkbox:checked + label:before { content: "\f14a"; color: #D84E5B; transform: scale(1.3);
}
select { -webkit-appearance: none;	-moz-appearance: none;	appearance: none; text-indent: 0.01px; text-overflow: "";
}
select:-ms-expand { display: none;
}
.dropdown select { padding: 10px 42px 10px 10px; background: #D84E5B; width: 100%; color: #FFF; border-radius: 0;	display: inline-block;	cursor: pointer;	outline: none; border: none;
}
.dropdown { position: relative; }
.dropdown:before {	content: '';	right: 0px;	top: 2px;	width: 36px;	height: 32px; border-left: 1px solid rgba(237,237,237,.3);	position: absolute;	pointer-events: none;	display: block; pointer-events: none;
}
.dropdown:after { content: "\f078"; position: absolute; top: 10px; right: 10px; pointer-events: none;
}
option { border: none; padding: 20px;
}

Form Elements - Script Codes JS Codes

new Vue({ el: '#app', data: { fname: '', lname: '' }, methods: { textFocus(e) { } }
});
Form Elements - Script Codes
Form Elements - Script Codes
Home Page Home
Developer Sicontis
Username Sicontis
Uploaded July 12, 2022
Rating 3
Size 2,907 Kb
Views 52,624
Do you need developer help for Form Elements?

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!

Sicontis (Sicontis) Script Codes
Name
Simple Modal
3D Flip Subscribe Button
Simple Day Timer
Subnav Reveal Animation
That Reddit Guy
Sign Up Form
Weather API Test
A Pen by Sicontis
Vue JS Typeahead
Portfolio
Create amazing blog posts 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!