Text input (single-line):used for a single line of text such
as email addresses and names.Password input:like a single line text box but it masks the characters entered.Text area (multi-line):for longer areas of text, such as messages and comments.Radio buttons:for use when a user must select one of a number of options.Checkboxes:when a user can select and unselect one or more options.Drop-down boxes:when a user must pick one of a number of options from a list.Submit buttons:to submit data from your form to another web page.
- Image buttons:similar to submit buttons but they allow you to use an image.File upload:allows users to upload files (e.g. images) to a website.fills in a form and then presses a button to submit the information to the server.A form may have several form controls, each gathering different information. The server needs to know which piece of inputted data corresponds with which form element.<form> tag,following with the action attribute and will usually have a method and id attribute too.
The action:Its value is theURLfor the page on the server that will receive the information in the form when it is submitted.
Methodused to sent the form using get or post methods.
The
idis used to identify the form distinctly from other elements on the page.
Example:
<form action="http://www.example.com/subscribe.php" method="get">
<p>This is where the form controls will appear.</p>
</form>
<input> tag which is responsible to create several different form controls,followed with type attribute that will determines what kind of input they will be creating.Example:
<form action="http://www.example.com/login.php">
<p>Username:
<input type="text" name="username" maxlength="30" />
</p>
</form>
name:It’s used to tell the server which form control each piece of data was entered into. It what will be rendered to the user.
maxlength attributeis used to limit the number of characters a user may enter into the text field.
<input> tag followed with the type attribute with a value of password it creates a text box that acts just like a single-line text input, except the characters are blocked out(Hidden).Example:
<form action="http://www.example.com/login.php">
<p>Username:
<input type="text" name="username" maxlength="30" />
</p>
<p>Password:
<input type="password" name="password" maxlength="30" />
</p>
</form>
<textarea> element and it is used to create a mutli-line text input.Example:
<form action="http://www.example.com/comments.php">
<p>What did you think of this gig?</p>
<textarea name="comments" cols="20" rows="4">Enter
your comments...</textarea>
</form>
Any text that appears between the opening
<textarea>and closing</textarea>tags will appear in the text box when the page loads.
<input> tag followed with the type attribute with a value of radio it allow users to pick just one of a number of options.Example:
<form action="http://www.example.com/profile.php">
<p>Please select your favorite genre:
`
`
<input type="radio" name="genre" value="rock" checked="checked" />
` Rock`
<input type="radio" name="genre" value="pop" />
Pop
<input type="radio" name="genre" value="jazz" />
Jazz
</p>
</form>
The
value attributeindicates the value that is sent to the server for the selected option.
The checked attributecan be used to indicate which value (if any) should be selected when the page loads.Only one radio button in a group should use this attribute.
<input> tag followed with the type attribute with a value of checkbox it allow users to select (and unselect) one or more options.Example:
<form action="http://www.example.com/profile.php">
<p>Please select your favorite music service(s):<br />
<input type="checkbox" name="service" value="itunes" checked="checked" />iTunes
<input type="checkbox" name="service" value="lastfm" /> Last.fm
<input type="checkbox" name="service" value="spotify" /> Spotify
</p>
</form>
<select> tag that is allows users to select one option from a drop down list. It is followed with the name attribute and the <option> element that is specify the options that the user can select from,and the value attributeExample:
<form action="http://www.example.com/profile.php">
<p>What device do you listen to music on?</p>
<select name="devices">
<option value="ipod">iPod</option>
<option value="radio">Radio</option>
<option value="computer">Computer</option>
</select>
</form>
In
drop down list boxif the user does not select an option, then the first item will be sent to the server as the value for this control.
<select> tag followed with the name attribute and
the multiple attribute that allow users to select multiple options from this list,and the size attribute that turn a drop down select
box into a box that shows more than one option.Example:
<form action="http://www.example.com/profile.php">
<p>Do you play any of the following instruments?(You can select more than one option by holding down while selecting different options.)</p>
<select name="instruments" size="3" multiple="multiple">
<option value="guitar" selected="selected">Guitar</option>
<option value="drums">Drums</option>
<option value="keyboard" selected="selected">Keyboard</option>
<option value="bass">Bass</option>
</select>
</form>
<input> tag followed with the type attribute with a value of file it allow users to upload a file.And the type file creates a box that looks like a text input followed by a browse button to select a file.Example:
<form action="http://www.example.com/upload.php" method="post">
<p>Upload your song in MP3 format:</p>
<input type="file" name="user-song" /><br />
<input type="submit" value="Upload" />
</form>
<input> tag followed with the type attribute with a value of submit it is used to send a form to the server.Example:
<form action="http://www.example.com/subscribe.php">
<p>Subscribe to our email list:</p>
<input type="text" name="email" />
<input type="submit" name="subscribe" value="Subscribe" />
</form>
The value attribute is used to control the text that appears on a button.The text will be rendered to the user.
<input> tag followed with the type attribute with a value of image and it’s allow to use an image for the submit button.Example:
<form action="http://www.example.org/subscribe.php">
<p>Subscribe to our email list:</p>
<input type="text" name="email" />
<input type="image" src="images/subscribe.jpg" width="100" height="20" />
</form>
<button> tag it is allow users more control over how their buttons appear and allows to combine text and images between the opening <button> tag and closing </button> tag.<input> tag followed with the type attribute with a value of hidden.Example:
<form action="http://www.example.com/add.php">
<button><img src="images/add.gif" alt="add" width="10" height="10" /> Add</button>
<input type="hidden" name="bookmark" value="lyrics" />
</form>
<An overall about forms>
<form> element.<label> tag ,it is used to makes the form accessible to vision-impaired users,followed with the for attribute states which form control the label belongs to.Example:
<label>Age: <input type="text" name="age" /></label>
<br/ >
Gender:
<input id="female" type="radio" name="gender" value="f">
<label for="female">Female</label>
<input id="male" type="radio" name="gender" value="m">
<label for="male">Male</label>
<label>element is used with a checkbox or radio button.
<fieldset> tag,it is allows to group related form
controls together inside the it. It is particularly helpful for longer
forms.<legend> element that contains a caption which helps identify the purpose of that group of form controls.Example:
<fieldset>
<legend>Contact details</legend>
<label>Email:<br />
<input type="text" name="email" /></label><br />
<label>Mobile:<br />
<input type="text" name="mobile" /></label><br />
<label>Telephone:<br />
<input type="text" name="telephone" /></label>
</fieldset>
required attribute woth the value of required.Example:
<form action="http://www.example.com/login/" method="post">
<label for="username">Username:</label>
<input type="text" name="username" required="required" /></title><br />
<label for="password">Password:</label>
<input type="password" name="password" required="required" />
<input type="submit" value="Submit" />
</form>
<input> tag followed with the type attribute with a value of date to collect a date data from the user .Example:
<form action="http://www.example.com/bookings/" method="post">
<label for="username">Departure date:</label>
<input type="date" name="depart" />
<input type="submit" value="Submit" />
</form>
<input> tag followed with the type attribute with a value of email to collect an email address data from the user .Example:
<form action="http://www.example.org/subscribe.php">
<p>Please enter your email address:</p>
<input type="email" name="email" />
<input type="submit" value="Submit" />
</form>
<input> tag followed with the type attribute with a value of url to collect from a user a web page address .Example:
<form action="http://www.example.org/profile.php">
<p>Please enter your website address:</p>
<input type="url" name="website" />
<input type="submit" value="Submit" />
</form>
<input> tag followed with the type attribute with a value of search to create a single line text box for search queries. It’s also use the placeholder attribute with value is text that will be shown in the text box.Example:
<form action="http://www.example.org/search.php">
<p>Search:</p>
<input type="search" name="search" placeholder="Enter keyword" />
<input type="submit" value="Search" />
</form>
list-style-type property.
Example:
ol {
list-style-type: lower-roman;}
list-style-image property with the value of the url of the image.Example:
ul {
list-style-image: url("images/star.png");}
list-style-position with value of:
outside:the marker sits to the left of the block of text.inside:the marker sits inside the box of text.Example:
ul.illuminations {
list-style-position: outside;}
ul.season {
list-style-position: inside;}
list-style-position,that act the same way.Example:
ul {
list-style: inside circle;
width: 300px;}
width: to set the width of the table.padding: to set the space between the border of each table cell and its content.text-transform: to convert the content of the table headers to uppercase.letter-spacing, font-size: to add additional styling to the content of the table headers.border-top, border-bottom: to set borders above and below
the table headers.text-align: to align the writing to the left of some table cells and to the right of the others.background-color: to change the background color of the alternating table rows.hover: to highlight a table row when a user’s mouse goes over it.give cells padding: for whene the text in a table cell either touches a border or another cell.Example:
table {
width: 600px;}
th, td {
padding: 7px 10px 10px 10px;}
th {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 90%;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
text-align: left;}
tr.even {
background-color: #efefef;}
tr:hover {
background-color: #c3e6e5;}
show:to shows the borders of any empty cells.hide:to hides the borders of any empty cells.inherit:to instructs the table cells to obey the rules of the containing table when having one table nested inside another.Example:
td {
border: 1px solid #0088dd;
padding: 15px;}
table.one {
empty-cells: show;}
table.two {
empty-cells: hide;}
border-spacing property that control the gap, and the border-collapse property that control the collapse adjacent borders and it’s takes these values:
collapse:borders are collapsed into a single border where possible.separate:borders are detached from each other.Example:
td {
background-color: #0088dd;
padding: 15px;
border: 2px solid #000000;}
table.one {
border-spacing: 5px 15px;}
table.two {
border-collapse: collapse;}
<Styling Forms>font-size: sets the size of the text entered by the user.color: sets the text color, and background-color sets the background color of the input.border: adds a border around the edge of the input box, and border-radius can be used to create rounded corners .focus pseudo-class is used to change the background color of the text input when it is being used.hover psuedo-class applies the same styles when the user hovers over them.background-image: adds a background image to the box.Example:
input {
font-size: 120%;
color: #5a5854;
background-color: #f2f2f2;
border: 1px solid #bdbdbd;
border-radius: 5px;
padding: 5px 5px 5px 30px;
background-repeat: no-repeat;
background-position: 8px 9px;
display: block;
margin-bottom: 10px;}
input:focus {
background-color: #ffffff;
border: 1px solid #b1e1e4;}
input#email {
background-image: url("images/email.png");}
input#twitter {
background-image: url("images/twitter.png");}
input#web {
background-image: url("images/web.png");}
color: is used to change the color of the text on the button.text-shadow: can give a 3D look to the text .border-bottom: has been used to make the bottom border of the button slightly thicker, which gives it a more 3D feel.background-color can make the submit button stand out from other items around it.hover pseudo-class: used to change the appearance of the button when the user hovers over it.Example:
input#submit {
color: #444444;
text-shadow: 0px 1px 1px #ffffff;
border-bottom: 2px solid #b2b2b2;
background-color: #b9e4e3;
background: -webkit-gradient(linear, left top,
left bottom, from(#beeae9), to(#a8cfce));
background:
-moz-linear-gradient(top, #beeae9, #a8cfce);
background:
-o-linear-gradient(top, #beeae9, #a8cfce);
background:
-ms-linear-gradient(top, #beeae9, #a8cfce);}
input#submit:hover {
color: #333333;
border: 1px solid #a4a4a4;
border-top: 2px solid #b2b2b2;
background-color: #a0dbc4;
background: -webkit-gradient(linear, left top,
left bottom, from(#a8cfce), to(#beeae9));
background:
-moz-linear-gradient(top, #a8cfce, #beeae9);
background:
-o-linear-gradient(top, #a8cfce, #beeae9);
background:
-ms-linear-gradient(top, #a8cfce, #beeae9);}
Fieldsets: used to determining the edges of a form. In a long form they can help group together related information within it.Legend : used to indicate what information is required in the fieldset.
width: used to control the width of the fieldset.color :used to control the color of text.background-color :used to change the color behind these items.border:used to control the appearance of the border around
the fieldset and/or legend.border-radius : used to soften the edges of these elements.padding :used to add space inside these elements.Example:
fieldset {
width: 350px;
border: 1px solid #dcdcdc;
border-radius: 10px;
padding: 20px;
text-align: right;}
legend {
background-color: #efefef;
border: 1px solid #dcdcdc;
border-radius: 10px;
padding: 10px 20px;
text-align: left;
text-transform: uppercase;}
float property to the left of the page and setting the width property on those elements and text-align property to align the titles to the right and padding to control the gap between the text in the title boxes and the form controls.Example:
.title {
float: left;
width: 100px;
text-align: right;
padding-right: 10px;}
.radio-buttons label {
float: none;}
.submit {
text-align: right;}
cursor property.-The values for this property:
Example:
a {
cursor: move;}
<An overall about lists,tables and forms>
-There are several elements are specifically used to control the appearance of lists, tables, and forms.
list-style-type and list-style image properties.Events are used to makes the page feel more interactive.
References:
@Jon Duckett/HTML & CSS @Jon Duckett/JAVASCRIPT