Create Dynamic Forms HTML CSS JavaScript and jQuery
Planning a Simple Form
Provide a point of interaction between the web user and web application. Allowing users to enter data which typically is sent to the web server for processing or can be used on the client side to immediately update or display results.
Web forms control tags are used to intake information.
Before you code, create a quick mockup which you can review to ensure that the right set of data is being requested.
Tips for creating good forms :
- try to keep them as short as possible, the longer a form the more chance of frustrating the user. Split the forms up to separate pages if needed. Avoid fields that are not necessary.
- Use the Correct input field type – HTML5 elements for forms. They will also help with validation
- Make the buttons appear as buttons and have them easy to find. Use good meaningful labels.
- Keep a sensible order to the fields and buttons. Group together similar content so that it is logical.
- Use a label – try to avoid the placeholder as it disappears when the user starts typing
- Keep the labels short and informative.
- Make sure the field length matches up with the data length required
- Ensure the fields look like a field avoid styling that contrasts the border
- Avoid background colors that look similar to buttons and other page elements.
- Try to keep inputs as one column if possible
- Avoid using all caps for labels
- Keep checkboxes vertical, think of the design and how it will appear on different size screens.
- Display any message for the field inline so that it can be associated with that field
- Consider accessibility
<!DOCTYPE html>
<html>
<head>
<title>Simple Form</title>
<link rel=”stylesheet” href=”form1.css”>
</head>
<body>
<form>
<div>
<label for=”user”>Name:</label>
<input type=”text” id=”user” name=”user”>
</div>
<div>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email”>
</div>
<div>
<label for=”message”>Message:</label>
<textarea id=”message” name=”message”></textarea>
</div>
<div>
<button type=”submit”>Submit Request</button>
</div>
</form>
</body>
</html>
* {
box-sizing: border-box;
}
form {
border:1px solid #ddd;
margin: auto;
width:90%;
border-radius: 10px;
padding:10px;
}
form div{
padding:3px;
}
form input, form textarea{
width : 100%;
border:1px solid #888;
}
form textarea {
height:100px;
}
form button {
width:50%;
display:block;
margin:auto;
font-size: 1.1em;
padding:5px;
}
form label {
font-size: 0.8em;
padding:3px 0;
color:#222;
}
Form input Types
<!DOCTYPE html>
<html>
<head>
<title>Simple Form</title>
<link rel=”stylesheet” href=”form1.css”>
</head>
<body>
<form>
<div>
<input type=”search” name=”search” id=”search”><br>
<input type=”tel” name=”val1″ id=”val1″><br>
<input type=”url” name=”val2″ id=”val2″><br>
<input type=”number” name=”val3″ id=”val3″ min=”5″ max=”100″ step=”10″><br>
</div>
<div>
<label for=”slider”>You select</label>
<input type=”range” name=”slider” id=”slider” min=”100″ max=”500″ step=”10″ value=”250″>
</div>
<div>
<input type=”datetime-local” name=”val4″ id=”val4″><br>
<input type=”month” name=”val5″ id=”val5″><br>
<input type=”time” name=”val6″ id=”val6″><br>
<input type=”date” name=”val7″ id=”val7″ min=”2020-01-01″ max=”2024-01-01″><br>
</div>
<div>
<input type=”color” name=”val8″ id=”val8″><br>
<input type=”password” name=”val9″ id=”val9″><br>
</div>
<div>
<label for=”user”>Name:</label>
<input type=”text” id=”user” name=”user” value=”Laurence”>
</div>
<div>
<input type=”radio” id=”r1″ name=”radioV” value=”one”><label for=”r1″>one</label>
<input type=”radio” id=”r2″ name=”radioV” value=”two”><label for=”r2″>two</label>
<input type=”radio” id=”r3″ name=”radioV” value=”three”><label for=”r3″>three</label>
</div>
<div>
<input type=”checkbox” id=”c1″ name=”checkV” value=”one”><label for=”c1″>one</label>
<input type=”checkbox” id=”c2″ name=”checkA” value=”two”><label for=”c2″>two</label>
</div>
<div>
<input type=”file”>
<input type=”image” src=”http://www.discoveryvip.com/img/d.png” alt=”submit button” >
</div>
<div>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email” multiple>
</div>
<div>
<label for=”message”>Message:</label>
<textarea id=”message” name=”message”></textarea>
</div>
<div>
<input type=”reset”>
<input type=”button” value=”Say Hello”>
<input type=”submit” >
<button type=”submit”>Submit Request</button>
</div>
</form>
</body>
</html>
* {
box-sizing: border-box;
}
form {
border:1px solid #ddd;
margin: auto;
width:90%;
border-radius: 10px;
padding:10px;
}
form div{
padding:3px;
}
form input, form textarea{
width : 100%;
border:1px solid #888;
}
form textarea {
height:100px;
}
form button {
width:50%;
display:block;
margin:auto;
font-size: 1.1em;
padding:5px;
}
form label {
font-size: 0.8em;
padding:3px 0;
color:#222;
}
input[type=”radio”],input[type=”checkbox”] {
display:inline-block;
width:30%;
}
Regex expression
<!DOCTYPE html>
<html>
<head>
<title>Simple Form</title>
<link rel=”stylesheet” href=”form1.css”>
</head>
<body>
<ol>
<li>
Use a label – try to avoid the placeholder as it disappears when the user starts typing
</li>
<li>
Keep the labels short and informative.
</li>
<li>
Make sure the field length matches up with the data length required
</li>
<li>
Try to keep them as short as possible, the longer a form the more chance of frustrating the user. Split the
forms up to separate pages if needed. Avoid fields that are not necessary.
</li>
<li>
Use the Correct input field type – HTML5 elements for forms. They will also help with validation
</li>
<li>
Make the buttons appear as buttons and have them easy to find. Use good meaningful labels.
</li>
<li>
Keep a sensible order to the fields and buttons. Group together similar content so that it is logical.
</li>
<li>
Ensure the fields look like a field avoid styling that contrasts the border
</li>
<li>
Avoid background colors that look similar to buttons and other page elements.
</li>
<li>
Try to keep inputs as one column if possible
</li>
<li>
Avoid using all caps for labels
</li>
<li>
Keep checkboxes vertical, think of the design and how it will appear on different size screens.
</li>
<li>
Display any message for the field inline so that it can be associated with that field
</li>
<li>
Consider accessibility
</li>
</ol>
<form action=”index.html” method=”GET” autocomplete=”on” id=”form1″>
<div>
<fieldset>
<label for=”sel”>Pick one</label>
<select name=”sel” id=”sel” size=”2″ multiple>
<option value=”one”>One</option>
<option value=”one1″>One1</option>
<option value=”one2″ selected>One2</option>
<option value=”one3″>One3</option>
<option value=”one4″>One4</option>
</select><br>
<label for=”big3″>3 Uppercase letters</label>
<input type=”text” pattern=”([A-Z]{3})” placeholder=”Upper Case 3″ id=”big3″ maxlength=”3″>
<input type=”search” name=”search” id=”search” value=”test”>
</fieldset>
<fieldset>
<input type=”tel” name=”val1″ id=”val1″ disabled value=”999″><br>
<input list=”datal”>
<datalist id=”datal”>
<option value=”one”>
<option value=”one1″>
<option value=”one2″>
<option value=”one3″>
<option value=”one4″>
</datalist>
<input type=”url” name=”val2″ id=”val2″ readonly value=”http://www.google.com”><br>
<input type=”number” name=”val3″ id=”val3″ min=”5″ max=”100″ step=”10″><br>
</fieldset>
</div>
<div>
<label for=”slider”>You select</label>
<input type=”range” name=”slider” id=”slider” min=”100″ max=”500″ step=”10″ value=”250″>
</div>
<div>
<input type=”datetime-local” name=”val4″ id=”val4″><br>
<input type=”month” name=”val5″ id=”val5″><br>
<input type=”time” name=”val6″ id=”val6″><br>
<input type=”date” name=”val7″ id=”val7″ min=”2020-01-01″ max=”2024-01-01″><br>
</div>
<div>
<input type=”color” name=”val8″ id=”val8″><br>
<input type=”password” name=”val9″ id=”val9″><br>
</div>
<div>
<label for=”user”>Name:</label>
<input type=”text” id=”user” name=”user” value=”Laurence” size=”10″ maxlength=”10″>
</div>
<div>
<input type=”radio” id=”r1″ name=”radioV” value=”one”><label for=”r1″>one</label>
<input type=”radio” id=”r2″ name=”radioV” value=”two”><label for=”r2″>two</label>
<input type=”radio” id=”r3″ name=”radioV” value=”three”><label for=”r3″>three</label>
</div>
<div>
<input type=”checkbox” id=”c1″ name=”checkV” value=”one”><label for=”c1″>one</label>
<input type=”checkbox” id=”c2″ name=”checkA” value=”two”><label for=”c2″>two</label>
</div>
<div>
<input type=”file” multiple>
</div>
<div>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email” multiple required autofocus>
</div>
<div>
<label for=”message”>Message:</label>
<textarea id=”message” name=”message”></textarea>
</div>
<div>
<input type=”reset”>
<input type=”button” value=”Say Hello”>
<input type=”submit”>
<button type=”submit”>Submit Request</button>
</div>
</form>
</body>
</html>
Customize Form Elements
<!DOCTYPE html>
<html>
<head>
<title>Simple Form</title>
<link rel=”stylesheet” href=”form1.css”>
</head>
<body>
<form action=”index.html” method=”GET” autocomplete=”on” id=”form1″>
<div>
<fieldset>
<label for=”sel”>Pick one</label>
<select name=”sel” id=”sel” size=”2″ multiple>
<option value=”one” >One</option>
<option value=”one1″>One1</option>
<option value=”one2″ selected>One2</option>
<option value=”one3″>One3</option>
<option value=”one4″>One4</option>
</select>
<input type=”text” pattern=”([A-Z]{3})” placeholder=”Upper Case 3″>
<input type=”search” name=”search” id=”search” value=”test”></fieldset>
<fieldset>
<input type=”tel” name=”val1″ id=”val1″ disabled value=”999″><br>
<input list=”datal”>
<datalist id=”datal”>
<option value=”one”>
<option value=”one1″>
<option value=”one2″>
<option value=”one3″>
<option value=”one4″>
</datalist>
<input type=”url” name=”val2″ id=”val2″ readonly value=”http://www.google.com”><br>
<input type=”number” name=”val3″ id=”val3″ min=”5″ max=”100″ step=”10″><br>
</fieldset>
</div>
<div>
<label for=”slider”>You select</label>
<input type=”range” name=”slider” id=”slider” min=”100″ max=”500″ step=”10″ value=”250″>
</div>
<div>
<input type=”datetime-local” name=”val4″ id=”val4″><br>
<input type=”month” name=”val5″ id=”val5″><br>
<input type=”time” name=”val6″ id=”val6″><br>
<input type=”date” name=”val7″ id=”val7″ min=”2020-01-01″ max=”2024-01-01″><br>
</div>
<div>
<input type=”color” name=”val8″ id=”val8″><br>
<input type=”password” name=”val9″ id=”val9″><br>
</div>
<div>
<label for=”user”>Name:</label>
<input type=”text” id=”user” name=”user” value=”Laurence” size=”10″ maxlength=”10″>
</div>
<div>
<input type=”radio” id=”r1″ name=”radioV” value=”one”><label for=”r1″>one</label>
<input type=”radio” id=”r2″ name=”radioV” value=”two”><label for=”r2″>two</label>
<input type=”radio” id=”r3″ name=”radioV” value=”three”><label for=”r3″>three</label>
</div>
<div>
<input type=”checkbox” id=”c1″ name=”checkV” value=”one”><label for=”c1″>one</label>
<input type=”checkbox” id=”c2″ name=”checkA” value=”two”><label for=”c2″>two</label>
</div>
<div>
<input type=”file” multiple >
</div>
<div>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email” multiple required autofocus>
</div>
<div>
<label for=”message”>Message:</label>
<textarea id=”message” name=”message”></textarea>
</div>
<div>
<input type=”reset”>
<input type=”button” value=”Say Hello”>
<input type=”submit” >
<button type=”submit”>Submit Request</button>
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Simple Form</title>
<link rel=”stylesheet” href=”form1.css”>
</head>
<body>
<ol>
<li>
Use a label – try to avoid the placeholder as it disappears when the user starts typing
</li>
<li>
Keep the labels short and informative.
</li>
<li>
Make sure the field length matches up with the data length required
</li>
<li>
Try to keep them as short as possible, the longer a form the more chance of frustrating the user. Split the
forms up to separate pages if needed. Avoid fields that are not necessary.
</li>
<li>
Use the Correct input field type – HTML5 elements for forms. They will also help with validation
</li>
<li>
Make the buttons appear as buttons and have them easy to find. Use good meaningful labels.
</li>
<li>
Keep a sensible order to the fields and buttons. Group together similar content so that it is logical.
</li>
<li>
Ensure the fields look like a field avoid styling that contrasts the border
</li>
<li>
Avoid background colors that look similar to buttons and other page elements.
</li>
<li>
Try to keep inputs as one column if possible
</li>
<li>
Avoid using all caps for labels
</li>
<li>
Keep checkboxes vertical, think of the design and how it will appear on different size screens.
</li>
<li>
Display any message for the field inline so that it can be associated with that field
</li>
<li>
Consider accessibility
</li>
</ol>
<form action=”index.html” method=”GET” autocomplete=”on” id=”form1″>
<div>
<fieldset>
<label for=”sel”>Pick one</label>
<select name=”sel” id=”sel” size=”2″ multiple>
<option value=”one”>One</option>
<option value=”one1″>One1</option>
<option value=”one2″ selected>One2</option>
<option value=”one3″>One3</option>
<option value=”one4″>One4</option>
</select><br>
<label for=”big3″>3 Uppercase letters</label>
<input type=”text” pattern=”([A-Z]{3})” placeholder=”Upper Case 3″ id=”big3″ maxlength=”3″>
<input type=”search” name=”search” id=”search” value=”test”>
</fieldset>
<fieldset>
<input type=”tel” name=”val1″ id=”val1″ disabled value=”999″><br>
<input list=”datal”>
<datalist id=”datal”>
<option value=”one”>
<option value=”one1″>
<option value=”one2″>
<option value=”one3″>
<option value=”one4″>
</datalist>
<input type=”url” name=”val2″ id=”val2″ readonly value=”http://www.google.com”><br>
<input type=”number” name=”val3″ id=”val3″ min=”5″ max=”100″ step=”10″><br>
</fieldset>
</div>
<div>
<label for=”slider”>You select</label>
<input type=”range” name=”slider” id=”slider” min=”100″ max=”500″ step=”10″ value=”250″>
</div>
<div>
<input type=”datetime-local” name=”val4″ id=”val4″><br>
<input type=”month” name=”val5″ id=”val5″><br>
<input type=”time” name=”val6″ id=”val6″><br>
<input type=”date” name=”val7″ id=”val7″ min=”2020-01-01″ max=”2024-01-01″><br>
</div>
<div>
<input type=”color” name=”val8″ id=”val8″><br>
<input type=”password” name=”val9″ id=”val9″><br>
</div>
<div>
<label for=”user”>Name:</label>
<input type=”text” id=”user” name=”user” value=”Laurence” size=”10″ maxlength=”10″>
</div>
<div>
<input type=”radio” id=”r1″ name=”radioV” value=”one”><label for=”r1″>one</label>
<input type=”radio” id=”r2″ name=”radioV” value=”two”><label for=”r2″>two</label>
<input type=”radio” id=”r3″ name=”radioV” value=”three”><label for=”r3″>three</label>
</div>
<div>
<input type=”checkbox” id=”c1″ name=”checkV” value=”one”><label for=”c1″>one</label>
<input type=”checkbox” id=”c2″ name=”checkA” value=”two”><label for=”c2″>two</label>
</div>
<div>
<input type=”file” multiple>
</div>
<div>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email” multiple required autofocus>
</div>
<div>
<label for=”message”>Message:</label>
<textarea id=”message” name=”message”></textarea>
</div>
<div>
<input type=”reset”>
<input type=”button” value=”Say Hello”>
<input type=”submit”>
<button type=”submit”>Submit Request</button>
</div>
</form>
</body>
</html>