Technology Freaks: August 2013

Fieldset

Fieldsets group form controls and labels into organized sections. Much like a div or other structural element, thefieldset is a block level element that wraps related elements, however specifically within a form for better organization. Fieldsets by default also include a border outline that can be modified using CSS.


<fieldset>
  <label for="username">Username</label>
  <input type="text" name="username" id="username">
  <label for="password">Password</label>
  <input type="text" name="password" id="password">
</fieldset>

Fieldset Demo

Username Password

Legend

A legend provides a caption, or heading, for a fieldset. The legend element wraps text describing the controls that fall within the fieldset. The HTML code should include the legend directly after the opening fieldset tag. Thelegend itself will appear on the page within the top left part of the fieldset border. The appearance of the legendon a page may be changed with CSS.


<fieldset>
  <legend>Login</legend>
  <label for="username">Username</label>
  <input type="text" name="username" id="username">
  <label for="password">Password</label>
  <input type="text" name="password" id="password">
</fieldset>

Legend Demo

LoginUsername Password

Form & Input Attributes

To accommodate all of the different form, input, and control elements there are a number of attributes and corresponding values. These attributes and values serve a lot of different functions including the ability to disable controls, add form validation, and so forth. Below are some of the more popular and useful attributes.

Disabled

The disabled Boolean attribute turns off an element or control so that it is not available for interaction or input. Elements that are disabled will not send any values to the server for form processing.

Applying the disabled Boolean attribute to a fieldset will disable all of the controls within the fieldset. If thetype attribute has a hidden value, the disabled Boolean attribute is disregarded.


<label for="username">Username</label>
<input type="text" name="username" id="username" disabled>

Disabled Demo

Username

Placeholder

The placeholder HTML5 attribute provides a tip within the control of an input and disappears once the control is clicked in, or gains focus. The placeholder attribute only applies to inputs with a type attribute value of text, email,search, tel, or url.

The main difference between the placeholder and value attributes is that the value text stays in place during focus unless manually deleted by a user. This is great for pre-populating data, such as personal information for a user, but not for providing suggestions. The difference between the two attributes can be seen below.


<label for="username">Username placeholder</label>
<input type="text" name="username" id="username" placeholder="Holder">

Placeholder Demo

Username placeholder Username value

Required

The required HTML5 attribute enforces that an element or control contain a value upon being submitted to the server. Should an element or control not have a value an error message will be displayed requesting a user complete the required field. Currently error message styles are controlled by the browser and are unable to be styled with CSS. Elements, on the other hand, can be styled using the :optional and :required CSS pseudo-classes.

Validation also occurs specific to a control’s type. For example, an input with a type attribute value of email will require that not only a value exist within the input, but that it also includes a valid email format.


<label for="name">Name</label>
<input type="text" name="name" id="name" required>

Required Demo

Additional Attributes

Other form and input attributes include, but are not limited to the following. Please feel free to research and look into these attributes as necessary.

accept
autocomplete
autofocus
formaction
formenctype
formmethod
formnovalidate
formtarget
max
maxlength
min
pattern
readonly
selectionDirection
step

Login Form Example

HTML


<form>
  <label for="login_username">Username</label>
  <input type="text" name="login_username" id="login_username">
  <label for="login_password">Password</label>
  <input type="password" name="login_password" id="login_password">
  <fieldset>
    <input type="submit" name="login_submit" id="login_submit" value="Login">
    <label><input type="checkbox" name="login_remember" id="login_remember"> Stay signed in</label>
  </fieldset>
</form>

CSS


form {
  background: linear-gradient(top, #fff, #f8f8f8);
  border: 1px solid #d0d2d5;
  border-bottom: 1px solid #bebfc2;
  border-radius: 4px;
  margin: 0 0 20px 0;
  padding: 20px;
  width: 212px;
}
label {
  color: #404853;
  display: block;
  font-weight: bold;
}
input {
  background: #fff;
  border: 1px solid #c6c9cc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 #fff;
  color: #555;
  font: 13px/20px 'Droid Sans', Arial, 'Helvetica Neue', 'Lucida Grande', sans-serif;
  margin: 0 0 20px 0;
  padding: 5px;
  width: 200px;
}
fieldset {
  background: linear-gradient(top, #ebeced, #dedfe0);
  border: none;
  border-top: 1px solid #d0d2d5;
  border-radius: 0 0 4px 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  margin: 5px 0 -20px -20px;
  padding: 18px 20px;
  width: 212px
}
fieldset input {
  margin: 0;
  width: auto;
}
#login_submit {
  background: linear-gradient(top, #687587, #404853);
  border: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.75);
  color: #fff;
  font-weight: bold;
  float: left;
  padding: 5px 10px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
}
#login_submit:hover {
  background: linear-gradient(top, #5a6675, #333942);
}
#login_submit:active {
  background: #333942;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.75);
}
fieldset label {
  color: #888;
  cursor: pointer;
  float: left;
  font-size: 12px;
  font-weight: normal;
  margin: 5px 0 0 20px;
}
fieldset label input {
  margin: -2px 2px 0 0;
  padding: 0;
}

Technology Freaks

Thursday, 29 August 2013

Building Forms - Part 3