2 minute read

HTML Forms are the place where the user sends data to a web server in a web site or application. An HTML form consists of one or more input elements (widgets). The form elements are often paired with a label element which describes their purpose.

A simple form

Create an Account

HTML

 1<form id="input" action="" method="post">
 2<fieldset>
 3<legend>Create an Account</legend>
 4<div>
 5	<label>Username:</label>
 6	<input type="text" name="user" required>
 7</div>
 8<div>
 9	<label>Email:</label>
10	<input type="email" name="email" required>
11</div>
12<div>
13	<label>Password:</label>
14	<input type="password" name="pwd" required>
15</div>
16<div>
17<input type="checkbox" name="policy" required><label>I agree to Blabla Terms of Service</label>
18</div>
19<button type="submit" value="Submit">Create account</button>
20<button type="reset">Reset</button>
21</fieldset>
22</form>

Style

 1<div id="editor">	
 2#input {
 3    background-color: white;
 4    border-radius: 10px;
 5    border: 2px solid beige;
 6    padding: 10px;
 7    border-top-width: 20px;
 8    margin: 0 auto;
 9    width: 600px;
10}
11label {
12    display: inline-block;
13    text-align: right;
14    width: 90px;
15}
16input {
17    width: 200px;
18    box-sizing: border-box;
19    margin-bottom: 2em;
20}
21button {
22    cursor: pointer;
23    font-family: arial,sans-serif;
24    font-size: 13px;
25    font-weight: bold;
26    margin: 11px 4px;
27    min-width: 54px;
28    height: 36px;
29    line-height: 27px;
30    padding: 0 16px;
31    text-align: center;
32}
33</div>	
comments powered by Disqus