names/unsafe_names.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>Unsafe Names for HTML Form Controls - Unsafe Names</title>
	<meta name="author" content="Garrett Smith">
	<link rel="Start" href="./">
	<link rel="stylesheet" href="../faq.css" type="text/css" media="all" charset="iso-8859-1">
	<link rel="stylesheet" href="names.css" type="text/css" media="all" charset="iso-8859-1">
</head>
<body>
    
    <h1>Unsafe Names for HTML Form Controls</h1>
    <h2>Unsafe Names</h2>
    <p>
    	There are roughly three-hundred (300) names which a form control 
    	must not have. 
    </p>

    <p>
      Unsafely named elements can be added to a <code>FORM</code> object after 
      the form has been created, or can be included in the HTML source 
      code.
    </p>
    
<h3>
Examples of Unsafe Form Control Names
</h3>
    <p>
        Unsafe <code>FORM</code>
        control names can appear in three ways:
    </p>
    <ol>
      <li>In the <a href="form_override_html_source.html">HTML Source</a></li>
      <li><a href="form_override_dom.html">Added via the DOM</a></li>
      <li>From <a href="form_override_change_name.html">changing the <code>name</code> property</a></li>
    </ol>

    <p>
        Not all browsers behave the same when using unsafe 
        <code>FORM</code> control names and a changing DOM. 
    </p>

    <h3>Solution: Namespaced Form Controls</h3>
    <p>
        A naming system can help avoid unsafe names.
    </p>
    <p>
        Name the form controls starting with a special prefix. The prefix should be 
        unique and represent the application. 
    </p>

    <p>
      For example, an application named "VortexMail" could use the prefix <code>vtxmail_</code>. 
    </p>

    <pre>
&lt;input name="vtxmail_fname" type="text"&gt;
&lt;input name="vtxmail_data" type="file"&gt;
&lt;input name="vtxmail_submit" type="submit"&gt;
</pre>
    <p>
        A prefix can also act as an identifying characteristic of your program or company, 
        like a namespace.
    </p>

    <h4>Unsafe Names - Partial List</h4>
    <p>
        This list contains all the names that a form control should never have. It assumes 
        that event handler attributes are never used and excludes some 
        proposed properties from HTML 5
        [<a href="conclusion.html#controls-normref">References</a>]. (e.g. 
        <code>autofocus</code>, <code>min</code>, <code>max</code>, 
        <code>height</code>, <code>labels</code>, <code>required</code>, <code>valid</code>,  etc.).
    </p>
    
    <p>
        If event handler attributes are used, the list of unsafe names also includes 
        every possible property name that exists on <code>document</code>, <code>window</code>, 
        and the object of the tag that the event handler is declared on (could be any tag).
        This would bring the list to well over five-hundred (500) unsafe names, including 
        <code>atob</code>, <code>bgColor</code>, <code>clear</code>, <code>close</code>, <code>opener</code>, 
        <code>status</code>, <code>write</code>, etc.
    </p>
    
    <ol style="-moz-column-count: 2;
    	-webkit-column-count: 2;
    	column-count: 2;
    	-moz-column-gap: 20px;
    	-webkit-column-gap: 20px;
    	column-gap: 20px;
    	list-style-position:inside;">
      <li>
        ATTRIBUTE_NODE
      </li>
      <li>
        CDATA_SECTION_NODE
      </li>
      <li>
        COMMENT_NODE
      </li>
      <li>
        DOCUMENT_FRAGMENT_NODE
      </li>
      <li>
        DOCUMENT_NODE
      </li>
      <li>
        DOCUMENT_POSITION_CONTAINED_BY
      </li>
      <li>
        DOCUMENT_POSITION_CONTAINS
      </li>
      <li>
        DOCUMENT_POSITION_DISCONNECTED
      </li>
      <li>
        DOCUMENT_POSITION_FOLLOWING
      </li>
      <li>
        DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC
      </li>
      <li>
        DOCUMENT_POSITION_PRECEDING
      </li>
      <li>
        DOCUMENT_TYPE_NODE
      </li>
      <li>
        ELEMENT_NODE
      </li>
      <li>
        ENTITY_NODE
      </li>
      <li>
        ENTITY_REFERENCE_NODE
      </li>
      <li>
        NOTATION_NODE
      </li>
      <li>
        PROCESSING_INSTRUCTION_NODE
      </li>
      <li>
        TEXT_NODE
      </li>
      <li>
        accept
      </li>
      <li>
        acceptCharset
      </li>
      <li>
        action
      </li>
      <li>
        addBehavior
      </li>
      <li>
        addEventListener
      </li>
      <li>
        addEventSource
      </li>
      <li>
        addRepetitionBlock
      </li>
      <li>
        addRepetitionBlockByIndex
      </li>
      <li>
        all
      </li>
      <li>
        appendChild
      </li>
      <li>
        applyElement
      </li>
      <li>
        ariaBusy
      </li>
      <li>
        ariaChecked
      </li>
      <li>
        ariaControls
      </li>
      <li>
        ariaDescribability
      </li>
      <li>
        ariaDisabled
      </li>
      <li>
        ariaExpanded
      </li>
      <li>
        ariaFlowto
      </li>
      <li>
        ariaHaspopup
      </li>
      <li>
        ariaHidden
      </li>
      <li>
        ariaInvalid
      </li>
      <li>
        ariaLabelledby
      </li>
      <li>
        ariaLevel
      </li>
      <li>
        ariaMultiselect
      </li>
      <li>
        ariaOwns
      </li>
      <li>
        ariaPosinset
      </li>
      <li>
        ariaPressed
      </li>
      <li>
        ariaReadonly
      </li>
      <li>
        ariaRequired
      </li>
      <li>
        ariaSecret
      </li>
      <li>
        ariaSelected
      </li>
      <li>
        ariaSetsize
      </li>
      <li>
        ariaValuemax
      </li>
      <li>
        ariaValuemin
      </li>
      <li>
        ariaValuenow
      </li>
      <li>
        attachEvent
      </li>
      <li>
        attributes
      </li>
      <li>
        autocomplete
      </li>
      <li>
        baseURI
      </li>
      <li>
        behaviorUrns
      </li>
      <li>
        blockDiraction
      </li>
      <li>
        blur
      </li>
      <li>
        canHaveChildren
      </li>
      <li>
        canHaveHTML
      </li>
      <li>
        checkValidity
      </li>
      <li>
        childElementCount
      </li>
      <li>
        childNodes
      </li>
      <li>
        children
      </li>
      <li>
        className
      </li>
      <li>
        clearAttributes
      </li>
      <li>
        click
      </li>
      <li>
        clientHeight
      </li>
      <li>
        clientLeft
      </li>
      <li>
        clientTop
      </li>
      <li>
        clientWidth
      </li>
      <li>
        cloneNode
      </li>
      <li>
        compareDocumentPosition
      </li>
      <li>
        componentFromPoint
      </li>
      <li>
        constructor
      </li>
      <li>
        contains
      </li>
      <li>
        contentEditable
      </li>
      <li>
        currentStyle
      </li>
      <li>
        data
      </li>
      <li>
        detachEvent
      </li>
      <li>
        dir
      </li>
      <li>
        dispatchEvent
      </li>
      <li>
        dispatchFormChange
      </li>
      <li>
        dispatchFormInput
      </li>
      <li>
        document
      </li>
      <li>
        dragDrop
      </li>
      <li>
        elements
      </li>
      <li>
        encoding
      </li>
      <li>
        enctype
      </li>
      <li>
        fireEvent
      </li>
      <li>
        firstChild
      </li>
      <li>
        firstElementChild
      </li>
      <li>
        focus
      </li>
      <li>
        getAdjacentText
      </li>
      <li>
        getAttribute
      </li>
      <li>
        getAttributeNS
      </li>
      <li>
        getAttributeNode
      </li>
      <li>
        getAttributeNodeNS
      </li>
      <li>
        getBoundingClientRect
      </li>
      <li>
        getClientRects
      </li>
      <li>
        getElementsByClassName
      </li>
      <li>
        getElementsByTagName
      </li>
      <li>
        getElementsByTagNameNS
      </li>
      <li>
        getExpression
      </li>
      <li>
        getFeature
      </li>
      <li>
        getUserData
      </li>
      <li>
        hasAttribute
      </li>
      <li>
        hasAttributeNS
      </li>
      <li>
        hasAttributes
      </li>
      <li>
        hasChildNodes
      </li>
      <li>
        hasOwnProperty
      </li>
      <li>
        hideFocus
      </li>
      <li>
        id
      </li>
      <li>
        innerHTML
      </li>
      <li>
        innerText
      </li>
      <li>
        insertAdjacentElement
      </li>
      <li>
        insertAdjacentHTML
      </li>
      <li>
        insertAdjacentText
      </li>
      <li>
        insertBefore
      </li>
      <li>
        isContentEditable
      </li>
      <li>
        isDefaultNamespace
      </li>
      <li>
        isDefaultNamespaceURI
      </li>
      <li>
        isDisabled
      </li>
      <li>
        isEqualNode
      </li>
      <li>
        isMultiLine
      </li>
      <li>
        isPrototypeOf
      </li>
      <li>
        isSameNode
      </li>
      <li>
        isSupported
      </li>
      <li>
        isTextEdit
      </li>
      <li>
        item
      </li>
      <li>
        lang
      </li>
      <li>
        language
      </li>
      <li>
        lastChild
      </li>
      <li>
        lastElementChild
      </li>
      <li>
        length
      </li>
      <li>
        localName
      </li>
      <li>
        lookupPrefix
      </li>
      <li>
        mergeAttributes
      </li>
      <li>
        method
      </li>
      <li>
        moveRepetitionBlock
      </li>
      <li>
        msBlockProgression
      </li>
      <li>
        msBoxSizing
      </li>
      <li>
        name
      </li>
      <li>
        namedItem
      </li>
       <li>
        namespaceURI
      </li>
      <li>
        nextSibling
      </li>
      <li>
        nodeName
      </li>
      <li>
        nodeType
      </li>
      <li>
        nodeValue
      </li>
      <li>
        normalize
      </li>
      <li>
        offsetHeight
      </li>
      <li>
        offsetWidth
      </li>
      <li>
        onOffBehavior
      </li>
      <li>
        onabort
      </li>
      <li>
        onactivate
      </li>
      <li>
        onbeforeactivate
      </li>
      <li>
        onbeforecopy
      </li>
      <li>
        onbeforecut
      </li>
      <li>
        onbeforedeactivate
      </li>
      <li>
        onbeforeeditfocus
      </li>
      <li>
        onbeforepaste
      </li>
      <li>
        onblur
      </li>
      <li>
        onchage
      </li>
      <li>
        onclick
      </li>
      <li>
        onclosecapture
      </li>
      <li>
        oncontextmenu
      </li>
      <li>
        oncopy
      </li>
      <li>
        oncut
      </li>
      <li>
        ondblclick
      </li>
      <li>
        ondeactivate
      </li>
      <li>
        ondrag
      </li>
      <li>
        ondragend
      </li>
      <li>
        ondragenter
      </li>
      <li>
        ondragleave
      </li>
      <li>
        ondragover
      </li>
      <li>
        onerror
      </li>
      <li>
        onfocus
      </li>
      <li>
        onfocusin
      </li>
      <li>
        onfocusout
      </li>
      <li>
        onhelp
      </li>
      <li>
        oninput
      </li>
      <li>
        onkeydown
      </li>
      <li>
        onkeypress
      </li>
      <li>
        onkeyup
      </li>
      <li>
        onmousedown
      </li>
      <li>
        onmouseenter
      </li>
      <li>
        onmouseleave
      </li>
      <li>
        onmousemove
      </li>
      <li>
        onmousemultiwheel
      </li>
      <li>
        onmouseout
      </li>
      <li>
        onmouseover
      </li>
      <li>
        onmouseup
      </li>
      <li>
        onmousewheel
      </li>
      <li>
        onmove
      </li>
      <li>
        onmoveend
      </li>
      <li>
        onmovestart
      </li>
      <li>
        onpaste
      </li>
      <li>
        onpropertychange
      </li>
      <li>
        onreadystatechange
      </li>
      <li>
        onresize
      </li>
      <li>
        onresizeend
      </li>
      <li>
        onresizestart
      </li>
      <li>
        onscroll
      </li>
      <li>
        onsearch
      </li>
      <li>
        onselect
      </li>
      <li>
        onselectstart
      </li>
      <li>
        ontimeerror
      </li>
      <li>
        onunload
      </li>
      <li>
        outerHTML
      </li>
      <li>
        outerText
      </li>
      <li>
        ownerDocument
      </li>
      <li>
        parentNode
      </li>
      <li>
        parentTextEdit
      </li>
      <li>
        prefix
      </li>
      <li>
        previousElementSibling
      </li>
      <li>
        previousSibling
      </li>
      <li>
        propertyIsEnumerable
      </li>
      <li>
        querySelector
      </li>
      <li>
        querySelectorAll
      </li>
      <li>
        quotes
      </li>
      <li>
        releaseCapture
      </li>
      <li>
        removeAttribute
      </li>
      <li>
        removeAttributeNS
      </li>
      <li>
        removeAttributeNode
      </li>
      <li>
        removeBehavior
      </li>
      <li>
        removeChild
      </li>
      <li>
        removeEventListener
      </li>
      <li>
        removeEventSource
      </li>
      <li>
        removeExpression
      </li>
      <li>
        removeNode
      </li>
      <li>
        removeRepetitionBlock
      </li>
      <li>
        repeatMax
      </li>
      <li>
        repeatMin
      </li>
      <li>
        repeatStart
      </li>
      <li>
        repetitionBlocks
      </li>
      <li>
        repetitionIndex
      </li>
      <li>
        repetitionTemplate
      </li>
      <li>
        repetitionType
      </li>
      <li>
        replace
      </li>
      <li>
        replaceAdjacentText
      </li>
      <li>
        replaceChild
      </li>
      <li>
        replaceNode
      </li>
      <li>
        reset
      </li>
      <li>
        resetFromData
      </li>
      <li>
        role
      </li>
      <li>
        runtimeStyle
      </li>
      <li>
        schemaTypeInfo
      </li>
      <li>
        scopeName
      </li>
      <li>
        scrollByLines
      </li>
      <li>
        scrollByPages
      </li>
      <li>
        scrollHeight
      </li>
      <li>
        scrollIntoView
      </li>
      <li>
        scrollLeft
      </li>
      <li>
        scrollTop
      </li>
      <li>
        scrollWidth
      </li>
      <li>
        selectNodes
      </li>
      <li>
        selectSingleNode
      </li>
      <li>
        setActive
      </li>
      <li>
        setAttributeNS
      </li>
      <li>
        setAttributeNode
      </li>
      <li>
        setAttributeNodeNS
      </li>
      <li>
        setCapture
      </li>
      <li>
        setExpression
      </li>
      <li>
        setIdAttribute
      </li>
      <li>
        setIdAttributeNS
      </li>
      <li>
        setIdAttributeNode
      </li>
      <li>
        setUserData
      </li>
      <li>
        sourceIndex
      </li>
      <li>
        spellcheck
      </li>
      <li>
        style
      </li>
      <li>
        submit
      </li>
      <li>
        swapNode
      </li>
      <li>
        tabIndex
      </li>
      <li>
        tagName
      </li>
      <li>
        tagUrn
      </li>
      <li>
        target
      </li>
      <li>
        templateElements
      </li>
      <li>
        text
      </li>
      <li>
        textContent
      </li>
      <li>
        title
      </li>
      <li>
        toLocaleString
      </li>
      <li>
        toString
      </li>
      <li>
        uniqueID
      </li>
      <li>
        unselectable
      </li>
      <li>
        unwatch
      </li>
      <li>
        urns
      </li>
      <li>
        valueOf
      </li>
      <li>
        watch
      </li>
      <li>
        window
      </li>
    </ol>
    
    <h4 style="clear:both">Early Adopter</h4>
    <p>
    	Safari 3 has implemented the behavior specified in more closely than 
    	Safari 2. Safari 3 replaces more pre-existing properties of a 
    	<code>FORM</code> when an element with the same name is added.
    </p>
    
    <div id="toc">
    	<h4>Table of Contents</h4>
        <ul class="pagination linkList">
            <li><a href="./index.html">Introduction</a></li>
            <li><a href="extra_props.html">Extra Properties: <code>FORM</code> Elements</a></li>
            <li><a href="extra_props_document.html">Extra Properties: <code>document</code></a></li>
            <li><a href="extra_props_global.html">Extra Properties: <code>global</code></a></li>
            <li><a href="event_handler.html">Event Handler Scope</a></li>
            <li><a href="api_design.html">API Design?</a></li>
            <li>Unsafe Names</li>
            <li><a href="conclusion.html">Conclusion</a></li>
        </ul>    
    </div>
    <ul id="nextLink" class="linkList">
      <li>
        <span class="prev">Previous:</span> <a href="api_design.html">API Design?</a>
      </li>
      <li>
        <span class="next">Next:</span> <a href="conclusion.html">Conclusion</a>
      </li>
    </ul>
</body>
</html>