How to Lock an Input Box

Save

HTML forms use input boxes to collect user data. You may need to prevent the user from editing the values of the input box but still display them to complete the form layout. Either the "Readonly" or "Disabled" attributes of the input box can be used to lock the values from user editing.

  • Open your HTML editor. If using a WYSIWYG editor, change to code view.

  • Enter the code <input type="text" name="txtName1" id="txtName1" readonly="readonly" value="My Readonly Value"/>. The readonly attribute can include the ="readonly" string or be left blank. Readonly locks the input box from user editing and is included in the form submission to the server.

  • Enter the code <input type="text" name="txtName-2" id="txtName-2" disabled="disabled" value="My Disabled Value"/>. The disabled attribute can include the ="disabled" string or left blank. Disabled locks the input box from editing and excludes the field from being submitted to the server with the form.

  • Enter the code

    <script type="text/javascript">

    function lock(id) {

    id.setAttribute("readonly","readonly");

    }

    </script>

    <input type="text" name="txtValue" id="txtValue" value="My Value" onblur="lock(this);"/>

    Using JavaScript, the attribute can be added dynamically when the user clicks off the input box to lock in the entered value.

References

  • Photo Credit Jupiterimages/Comstock/Getty Images
Promoted By Zergnet

Comments

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!