A Complete Guide to Web Design

242 Chapter 12 – Forms

Affecting the Appearance of Forms

Web Design in a Nutshell, eMatter Edition

HTML to make form elements turn on and off, or become hidden or visible based on user input. Table 12-1 lists the new attributes along with the form elements to which they can be applied.

Affecting the Appearance of Forms

Form elements are automatically rendered by the browser, giving the designer little control over the appearance of the controls themselves. Not surprisingly, the same element may be rendered slightly differently on different browsers and plat- forms (see Table 12-2). To make things even more interesting, Netscape will resize form elements containing text (text fields, text areas, and scrolling lists) when the constant width font is resized in the browser preferences. So, if a user’s fonts are set to 18 points, a <textarea> could suddenly become huge, and exceed the space you’ve allotted. Like many things on the Web, the way your forms will look is somewhat unpredictable.

Table 12-1: New Form Attributes in HTML 4.0

Attribute Description Related Tag(s) accept-charset Specifies the list of character encodings (character sets) that must be accepted by the server processing the form. It is part of the W3C’s interna- tionalization efforts requiring alternative character sets to represent non-Western writing systems.

accesskey Assigns an access key (keyboard shortcut) to an element for quicker access.

</h4><br />
<pre><code>disabled Disables the control for user<br />
input.</code></pre><br />
<h4><BUTTON></h4><br />
<h4><INPUT></h4><br />
<h4><OPTGROUP></h4><br />
<h4><OPTION></h4><br />
<h4><SELECT></h4><br />
<h4><TEXTAREA></h4><br />
<pre><code>read-only Prevents the user from<br />
changing the text in a field.</code></pre><br />
<pre><code><INPUT type=text><br />
<INPUT type=password><br />
<TEXTAREA><br />
tabindex Specifies position in the<br />
tabbing order. Tabbing navi-<br />
gation allows the user to<br />
cycle through the active<br />
fields using the Tab key.</code></pre><br />
<h4><BUTTON></h4><br />
<h4><INPUT></h4><br />
<h4><SELECT></h4><br />
<h4><TEXTAREA></h4>            </div>
            <meta itemprop='headline' content="p 256: <FORM> - A Complete Guide to Web Design - free download pdf - issuhub">
        </div>

<div role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
                            <span itemprop="url"><b><a href="/view/index?id=4334&pageIndex=255" rel="previous" itemprop="name">← Previous</a></b></span>
            
                            <span itemprop="url" class="mx-3"><b><a href="/view/index?id=4334&pageIndex=257" rel="next" itemprop="name">Next →</a></b></span>
                    </div>
        <div style="
            text-align: center;
            margin: 20px auto;
            padding: 13px;
            width: 240px;
            font-size: 20px;
        ">
            <a class="page-link" style="background-color: #72bf86;" target="_blank" href="/view/index?id=4334&pageIndex=255#bookdownload" title="Free download pdf" >Free download pdf</a>
        </div>
    </div>
        <div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 ml-lg-auto mb-5 mb-lg-0">

<div class="mb-4">
                    <h5 class="text-dark">Get our desktop app</h5>
                </div>

</div>
            <div class="col-6 col-md-3 col-lg mb-5 mb-lg-0">
                <h5 class="text-dark">Company</h5>

<ul class="list-unstyled mb-0">
                    <li class="my-2"><a  href="/about">About</a></li>
                    <li class="my-2"><a  href="/contact">Contact</a></li>
                    <li class="my-2"><a  href="/news/index">News</a></li>
                </ul>
                
            </div>
            <div class="col-6 col-md-3 col-lg mb-5 mb-lg-0">
                <h5 class="text-dark">Features</h5>

<li class="my-2"><a  href="/quick">Quick Start</a></li>
                    <li class="my-2"><a  href="/desktop">Desktop</a></li>
                    <li class="my-2"><a  href="/editor-help">Editor</a></li>

</ul>
            </div>
            <div class="col-6 col-md-3 col-lg">
                <h5 class="text-dark">Documentation</h5>

<li class="my-2"><a  href="/support/index">Support</a></li>
                    <li class="my-2"><a  href="/site/pricing">Pricing</a></li>
                </ul>
            </div>
            <div class="col-6 col-md-3">
                <h5 class="text-dark">Resources</h5>

<li class="my-2"> <a  href="/tutorial" target="_blank"> <span class="media align-items-center"> <i class="fa fa-info-circle mr-2"></i> <span class="media-body">Tutorial</span> </span> </a> </li>
                    <li class="my-2"> <a  href="/site/login"> <span class="media align-items-center"> <i class="fa fa-user-circle mr-2"></i> <span class="media-body">Your Account</span> </span> </a> </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-6 mb-4 mb-md-0">
                
                <ul class="nav nav-sm nav-white nav-x-sm align-items-center">
                    <li class="my-2"> <a  href="/privacy">Privacy & Policy</a> </li>
                    <li class=" opacity my-2 mx-3">/</li>
                    <li class="my-2"> <a  href="/terms">Terms</a> </li>
                </ul>
            </div>
            <div class="col-md-6 text-md-right">
                <ul class="list-inline mb-0">
                    
                    <li class="list-inline-item"> <a class="btn btn-xs btn-icon btn-soft-light" href="https://www.facebook.com/Issuhub-Flipbook-2315543688769343/"> <i class="fa fa-facebook text-dark"></i> </a> </li>
                    <li class="list-inline-item"> <a class="btn btn-xs btn-icon btn-soft-light" href="https://twitter.com/IssuhubBooks"> <i class="fa fa-twitter text-dark"></i> </a> </li>

</ul>
            </div>
        </div>
        
        <div style="text-align: center;">
            <div >© ISSUHUB. 2025. All rights reserved.</div>
        </div>
        
    </div>
</div>

</div>
</div>
<script src="/assets/6df76c57/assets/js/vendors/jquery-3.2.1.min.js"></script>
<script src="/assets/6df76c57/assets/js/vendors/bootstrap.bundle.min.js"></script></body>
</html>