Monochrome Form

Developer
Tamuna
Size
3,096 Kb
Views
6,072
  1. Monochrome Form Previews
  2. Monochrome Form HTML Codes
  3. Monochrome Form CSS Codes

How do I make an monochrome form?

Just a heap of different input types and their attributes.. What is a monochrome form? How do you make a monochrome form? This script and codes were developed by Tamuna on 03 January 2023, Tuesday.

Monochrome Form Previews
IQ Test

Monochrome Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Monochrome Form</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Monochrome</h1>
<form id="all" method="get" action=""> <fieldset> <legend>Texts</legend> <p> <label for="required">Required Text Field (Don't leave it blank):</label> <input type="text" id="required" /> </p> <p> <label for="numberText">Only numbers are allowed:</label> <input type="text" id="numberText" pattern="[0-9]*" /> </p> <p> <label for="placeholder">This one's got a placeholder text inside:</label> <input type="text" id="placeholder" placeholder="Plcaeholder Text" /> </p> <p> <label for="disable">And this one's disabled:</label> <input type="text" id="disable" disabled /> </p> <p> <label for="focus">This one has the focus by default:</label> <input type="text" id="focus" autofocus /> </p> <datalist id="avatar"> <option>Aang</option> <option>Katara</option> <option>Sokka</option> <option>Toph</option> <option>Zuko</option> <option>Suki</option> </datalist> <p> <label for="options">This field provides options when you start typing:</label> <input type="text" list="avatar" id="options" /> </p> <p> <label for="read">This one's read-only with a value attribute:</label> <input type="text" id="read" value="Sample Text" readonly /> </p> <p> <label for="url">Only URLs are allowed:</label> <input type="url" id="url" /> </p> <p> <label for="mail">Emails! Don't forget @:</label> <input type="email" id="mail" /> </p> </fieldset> <fieldset> <legend>Selection</legend> <p> <label for="normSel">Basic Selection List:</label> <select id="normSel"> <option>Option one</option> <option>Option two</option> <option>Option three</option> </select> </p> <p> <label for="compSel">Selection List with grouped options and my favourite preselected:</label> <select id="compSel"> <optgroup label="Team Avatar 1"> <option value="aang">Aang</option> <option value="katara">Katara</option> <option value="sokka" selected>Sokka</option> <option value="toph">Toph</option> <option value="zuko">Zuko</option> <option value="suki">Suki</option> </optgroup> <optgroup label="Team Avatar 2"> <option value="korra">Korra</option> <option value="bolin">Bolin</option> <option value="mako">Mako</option> <option value="asami">Asami</option> </optgroup> </select> </p> </fieldset> <fieldset> <legend>Time</legend> <p> <label for="date">Date selection with min and max defined:</label> <input type="date" id="date" min="2013-12-12" max="2014-01-05" /> </p> <p> <label for="datetime">Date and Time selection (which doesn't seem to work in Chrome yet):</label> <input type="datetime" id="datetime" /> </p> <p> <label for="datetimelocal">But the "datetime-local" does! Go figure...</label> <input type="datetime-local" id="datetimelocal" /> </p> <p> <label for="month">This one shows month and Year:</label> <input type="month" id="month" /> </p> <p> <label for="week">And here's a weekly section:</label> <input type="week" id="week" /> </p> <p> <label for="time">Showing time, with seconds increasing/decreasing by three steps each time:</label> <input type="time" id="time" step="3" /> </p> </fieldset> <fieldset> <legend>Numbers and Values</legend> <p> <label for="numbers">Here be numbers and the default value is predefined</label> <input type="number" id="numbers" value="5" /> </p> <p> <label for="telephone">Browsers don't care for phones, apparently: </label> <input type="tel" /> </p> <p> <label for="somerange">Pst!.. I've added those numbers on each end manually...</label> 1<input type="range" id="somerange" step="2" min="1" max="70" value="20" />70 </p> </fieldset> <fieldset> <legend>Misc.</legend> <p> <label for="colors">The Color Picker</label> <input type="color" id="colors" /> </p> <p> <label for="files">File selection, exclusively for sound files</label> <input type="file" id="files" accept="audio/*" /> </p> <p> <label for="searching">No life without a search field</label> <input type="search" id="searching" /> </p> <p> <label for="butt">No life without buttons either</label> <button>The Button</button> </p> <p> <label for="comment">And some textarea for our valuable comments</label> <textarea cols="30" rows="5" id="comment" placeholder="Valueable comments go here"></textarea> </p> </fieldset> <input type="submit" />
</form>
</body>
</html>

Monochrome Form - Script Codes CSS Codes

html, body { margin: 0; padding: 0; font-family: Verdana, Geneva, sans-serif;
}
body { background: -webkit-linear-gradient(#333, #4f4f4f);
}
p { font-size: 15px; color: #888;
}
h1 { text-align: center; text-shadow: 0 -1px 0 #555;
}
#all { overflow: hidden; width: 780px; margin: 5px auto 10px auto; padding: 10px 2px; border-radius: 5px; border-top: 1px solid white; border-left: 1px solid #666; border-right: 1px solid #666; border-bottom: 1px solid #222;
}
fieldset { margin: 15px 0;
}
legend { padding: 2px 10px; box-shadow: inset 0 0 5px 0 #777; color: #aaa; font-weight: bold;
}
fieldset, legend { border: 1px solid #888;
}
input, select, textarea, button { float: right;
}
input:focus, select:focus, textarea:focus, button:focus { outline: none;
}
Monochrome Form - Script Codes
Monochrome Form - Script Codes
Home Page Home
Developer Tamuna
Username AlienPiglet
Uploaded January 03, 2023
Rating 3
Size 3,096 Kb
Views 6,072
Do you need developer help for Monochrome 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!

Tamuna (AlienPiglet) Script Codes
Name
Canvas Night Sky
Anbani Flashcards
Starry Night of Markup
Creamy Form
Rainbow Fan
Lime Form
Pink and Blue
Spin Around the Cursor
CSS Color Spin
Rotating Menu
Create amazing love letters 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!