DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Building Scalable Real-Time Apps with AstraDB and Vaadin
Register Now

Trending

  • Mastering Time Series Analysis: Techniques, Models, and Strategies
  • Playwright JavaScript Tutorial: A Complete Guide
  • Managing Data Residency, the Demo
  • 13 Impressive Ways To Improve the Developer’s Experience by Using AI

Trending

  • Mastering Time Series Analysis: Techniques, Models, and Strategies
  • Playwright JavaScript Tutorial: A Complete Guide
  • Managing Data Residency, the Demo
  • 13 Impressive Ways To Improve the Developer’s Experience by Using AI
  1. DZone
  2. Coding
  3. Languages
  4. Useful Tips To Enrich Your HTML Forms

Useful Tips To Enrich Your HTML Forms

Schalk Neethling user avatar by
Schalk Neethling
·
Aug. 19, 08 · News
Like (0)
Save
Tweet
Share
7.97K Views

Join the DZone community and get the full member experience.

Join For Free
In the past months I already dedicated several post about forms design and usability. In this post I want to share some simple tips useful to enrich your forms with various elements such as suggest messages, autosuggest feature instead of <select> tag, simple check during data input and how to show hidden fields selecting a radio element option.

Suggest messages

This tips it's useful to display additional info when you select a field with the cursor: then a message appears on the right of the field with a short description about the field "properties":

[img_assist|nid=4589|title=|desc=|link=none|align=none|width=440|height=158]

I used this HTML code:

<label for="email" >Email</label>
<input type="text" id="email" onFocus="javascript:toggleMsg('msg-1')" onBlur="javascript:toggleMsg('msg-1')" maxlength="20"/>
<span id="msg-1" class="msg" style="visibility:hidden;">Required to log-in</span>

<label for="psw">Password</label>
<input type="text" id="psw" onFocus="javascript:toggleMsg('msg-2')" onBlur="javascript:toggleMsg('msg-2')" maxlength="20"/>
<span id="msg-2" class="msg" style="visibility:hidden;">Use a min 6 chars long password!</span>

...and this simple JavaScript function which set the CSS visibility property for the span tag which contains the message (msg-1 and msg-2) to visible or hidden:

<script type="text/javascript">
function toggleMsg(idElement){
element = document.getElementById(idElement);
if(element.style.visibility!='hidden'){
element.style.visibility='hidden';
} else {
element.style.visibility='visible';
}
}
</script>

For the source code take a look at the wollowing link:

Download source code

If you want add some nice effect you can use a JavaScript framework such as mootools or Scriptaculous to add fade-in and fade-out effects to show/hide the form messages. Take a look at this link for a post about this topic: Improve form usability with auto messages.

If you need some inspiration about how to design these kinds of messages using CSS, I suggest you to take a look at this other post I published about Css message box collection to find some ideas.

Autosuggest instead of list (<select> tag)

I am a big fan of autosuggest effect. It’s really simple to implement using different ways (JavaScript frameworks or, simply, some lines of hand-written code). You can think to use it instead of a <list> tag in your Form, for example in a field which users can use to insert their country:

[img_assist|nid=4590|title=|desc=|link=none|align=none|width=358|height=267]

When an user starts typing the name of his country, below the input field, it will appears a layer with some suggestions related to the inserted string. In the past month I added some post about how to implement a simple autosuggest feature using PHP and Coldfusion. I also prepared a simple PHP autosuggest component which you can reuse in your project simply changing some properties to implement this tutorial:

PHP components: Autosuggest
Search with autosuggest feature (PHP)
Search with autosuggest feature (Coldfusion)

Simple check during data input

A simple example could be a Twitter-like chars counter which decreases, from max chars number available in the field to zero, while you type something into the input field. In this example I set the max chars available to 20:

[img_assist|nid=4591|title=|desc=|link=none|align=none|width=330|height=174]

... in the picture aboe 20-5 is equal to max chars (20) - current string lenght (woork = 5).
I wrote this simple HTML code:

<label for="text">Write something here</label>
<input type="input" id="text" onKeyUp="javascript:countChars('counter_number')"/> <spam id="counter_number">20</spam>

...and I implemented the counter function using few lines of JavaScript code:

<script type="text/javascript">
function countChars(idElement){
max_chars = 20;
counter = document.getElementById(idElement);
field = document.getElementById('text').value;
field_length = field.length;

// Calculate remaining chars
remaining_chars = max_chars-field_length;
// Update the counter on the page
counter.innerHTML = remaining_chars;
}
</script>

You can also change the counter font color to red when the counter is near to zero (for example when remain less than five chars) simply add this line of code after the remaining_chars var of the previous code:

if(remaining_chars<=5){
counter.style.color="#CC0000";
}

... and the result is:

[img_assist|nid=4592|title=|desc=|link=none|align=none|width=375|height=174]

Download source code

Showing hidden fields selecting a radio element option

This is anoter tips very simple to implement. You can use it to display hidden fields when an user click on a radio/check button option which requires additional information. In this example I used a radio group with two option with a request to subscribe to a mailing list:

[img_assist|nid=4593|title=|desc=|link=none|align=none|width=285|height=92]

...so when an user select "yes" it appears the following input field to add the e-mail:

[img_assist|nid=4594|title=|desc=|link=none|align=none|width=367|height=153]

HTML code is:

<!-- Radio elements -->
<input type="radio" name="newsletter" value="1" id="newsletter-1" onclick="javascript:toggle(1)" /><label for="newsletter-1">Yes</label>
<input type="radio" name="newsletter" value="1" id="newsletter-0" onclick="javascript:toggle(0)" /><label for="newsletter-2">No</label>

<!-- Hidden layer -->
<div id="email-field" style="display:none;">
<input type="text" id="email" />
Add your Email
</div>

... and a simple JavaScript function to show/hide the hidden layer can be written in this way:

<script type="text/javascript">
function toggle(status){
idStatus = status;
element =document.getElementById('email-field');
if(idStatus==0){
element.style.display='none';
} else {
element.style.display='block';
}
}
</script>

Download source code

It's all! I hope you can find all these simple tips interesting and find new inspiration for your web projects.

Original Author

Original Article Written By Antonio Lupetti

HTML Form (document)

Published at DZone with permission of Schalk Neethling. See the original article here.

Opinions expressed by DZone contributors are their own.

Trending

  • Mastering Time Series Analysis: Techniques, Models, and Strategies
  • Playwright JavaScript Tutorial: A Complete Guide
  • Managing Data Residency, the Demo
  • 13 Impressive Ways To Improve the Developer’s Experience by Using AI

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: