Enhanced HTML5 support for form elements

In line with continued support for HTML5 in Dreamweaver, new attributes have been introduced for some form elements. In addition, four new HTML5 form elements have been introduced.

You can locate the form elements in the Insert panel. Select Window > Insert. In the Insert panel menu, select Forms.

Revised Forms workflow in Dreamweaver

Revised Forms workflow in the Dreamweaver 12.1 update.

David Powers

New attributes common to form elements

The following new attributes are common to all form elements:

  • Disabled: Select this option if you want the browser to disable the element
  • Required: Select this option if you want the browser to check if a value has been specified
  • Auto complete: Select this option to auto fill values when user enters information in a browser.
  • Auto focus: Select this option if you want the focus to be on this element when browser loads the page.
  • Read only: Select this option to set the value of the element to read-only.
  • Form: Specifies one or more forms to which an <input> element belongs.
  • Name: Unique name used to reference the element in the code.
  • Place holder: Hint that describes the expected value of an input field
  • Pattern: Regular expression against which the element's value is validated.
  • Title: Extra information about an element. Displayed as a tool tip.
  • Tab Index: Specifies the position of the current element in the tab order for the current document.

Form elements with modified attributes

  • Form No Validate: Select this option to disable form validation. This selection overrides the No Validate attribute at form level.
  • Form Enc Type: A MIME type with which a user agent is meant to associate this element for form submission.
  • Form Target: A browsing context name or keyword that represents the target of the control.
  • Accept charset: Specifies the character encodings used for form submission.

The links for attributes contain information on all attributes listed in the HTML5 specifications. Not all these attributes are present in the Properties panel. You can use the code view to add attributes not present in the panel.

Form Element New attributes specific to the element Description of attributes
Text Field List http://www.w3.org/TR/html-markup/input.text.html
Button <No specific new attribute> http://www.w3.org/wiki/HTML/Elements/button
Check Box <No specific new attribute> http://www.w3.org/TR/html-markup/input.checkbox.html
File Multiple http://www.w3.org/TR/html-markup/input.file.html
Form No validate, Accept charset http://www.w3.org/TR/2012/WD-html-markup-20120329/form.html
Hidden <No specific new attribute> http://www.w3.org/TR/2012/WD-html-markup-20120329/input.hidden.html
Password <No specific new attribute> http://www.w3.org/TR/html-markup/input.password.html
Image Width, Height, Action, Method, Form no Validate, Form Enc Type, Form target. http://www.w3.org/TR/html-markup/input.image.html
Reset <No specific new attribute> http://dev.w3.org/cvsweb/html5/markup/button.reset.html
Submit Form No Validate, Form Enc type, Form target, Action, Tab Index, Method. http://www.w3.org/TR/html-markup/input.submit.html
Radio <No specific new attribute> http://www.w3.org/TR/html-markup/input.radio.html
Text Area Rows, Cols, Place Holder, Wrap, Max Length, Tab Index http://www.w3.org/TR/html-markup/textarea.html
Select Size http://www.w3.org/wiki/HTML/Elements/select

HTML5 form elements

Form element Available in Description Description of attributes
Color 12.2 For input fields that should contain a color. http://www.w3.org/TR/html-markup/input.color.html
Date 12.2 Control that helps the user select a date. http://www.w3.org/TR/html-markup/input.date.html
Date Time 12.2 Allows the user to select a date and time (with the time zone). http://www.w3.org/TR/html-markup/input.datetime.html
Date Time Local 12.2 Allows the user to select a date and time (no time zone) http://www.w3.org/TR/html-markup/input.datetime-local.html
Month 12.2 Allows the user to select a month and year. http://www.w3.org/TR/html-markup/input.month.html
Number 12.2 For fields that should contain only numbers. http://www.w3.org/TR/html-markup/input.number.html
Range 12.2 For fields that should contain values from a range of numbers. http://www.w3.org/TR/html-markup/input.range.html
Time 12.2 Allows the user to select a time. http://www.w3.org/TR/html-markup/input.time.html
Week 12.2 Allows the user to select a week and year. http://www.w3.org/TR/html-markup/input.week.html
E-mail 12.1 A control for editing a list of email addresses given in the element’s value. http://www.w3.org/TR/html-markup/input.email.html
Search 12.1 A one-line plain-text edit control for entering one or more search terms. http://www.w3.org/TR/html-markup/input.search.html
Telephone (Tel) 12.1 A one-line plain-text edit control for entering a telephone number. http://www.w3.org/TR/html-markup/input.tel.html
URL 12.1 A control for editing an absolute URL given in the element’s value. http://www.w3.org/TR/html-markup/input.url.html

More like this

Sigla Adobe

Conectați-vă la cont