Html form clear all button

Clear form button in HTML. do we really need this? [closed]

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

I usually add the «clear form» button to HTML forms by default. Is this button actually necessary or a holdover from another time? I have never gotten to the end of the form and thought «I screwed up, I need to reset this!».

11 Answers 11

I stopped adding those about 1997. It really bothers me when I fill out a large form and accidentially hit the Clear button. I am not really sure why they were ever used in the first place. You’re right, I don’t think I’ve ever filled out a form and said to myself, «Oh wait a minute, I think I want to start over?»

what if the form was pre-populated with data? You make a change and then realize you need to revert it back to what it was?

I can’t believe none of you have mentioned that awesome «under construction» gif that was mandatory on all sites that year.

The nice thing about the reset button is that it will repopulate all form elements with their original values, not simply set them to zero or blank. So if the form was generated by server with saved data, the user makes a bunch of changes, and then realizes not only that something is wrong but that they also have no clue what the original value was, reset is VERY handy.

Also it’s nice for forms with lots of numerical data, like the timesheet page I’m working on right now. There are potentially 16 fields, all with generic, somewhat meaningless numbers. If the user figures out they were looking at the wrong schedule, it’s nice to just nuke it back to what the server loaded.

Having said all of that, my page does NOT include a reset button, simply because I didn’t want to leave open the exact opposite of awesome it presents, which is «and I’ll just click this button to save. oh shit.»

What I do instead is any field can be set to 0, but any non-valid data (non-numeric, less than 0, greater than 16) will revert back to the value last entered (which is stored via js). Doesn’t offer the grand sweep, but it at least lowers the amount of possible data entry errors and keeps the user from losing data over a simple mistake.

456 has a great article and link on this topic, by the way.

Источник

How to clear all the input in HTML forms?

Using HTML forms, you can easily take user input. The tag is used to get user input, by adding the form elements. Different types of form elements include text input, radio button input, submit button, etc.

The tag, helps you to take user input using the type attribute. To clear all the input in an HTML form, use the tag with the type attribute as reset.

Example 1

The following example demonstrates how to clear all the input in HTML forms.

In this example, we are going to use the document.getElementId to clear the text in the text field.

DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> meta http-equiv="X-UA-Compatible" content="IE=edge" /> meta name="viewport" content="width=device-width, initial-scale=1.0" /> title>Remove HTMLtitle> head> body>  form> input type="button" value="click here to clear" onclick="document.getElementById('inputText').value = '' "/> input type="text" value="Tutorix" id="inputText" />  form> body> html> 
 

When we click on the clear button the text inside the input(text area) field gets cleared.

Example 2

The following example demonstrates how to clear all the input in HTML forms.

In this example, we are going to use the rest button to clear the text in the text field.

DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> meta http-equiv="X-UA-Compatible" content="IE=edge" /> meta name="viewport" content="width=device-width, initial-scale=1.0" /> title>Clear all the input in HTML formstitle> head> body>  form> input type="text" name="input" /> input type="reset" value="reset" />  form> body> html> 
 

When we click on the clear button the text inside the input(text area) field gets cleared.

Example 3

The following example demonstrates how to clear all the input in HTML forms.

In this example, we are going to use onclick() method to clear the text in the text field.

DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> meta http-equiv="X-UA-Compatible" content="IE=edge" /> meta name="viewport" content="width=device-width, initial-scale=1.0" /> title>Clear all the input in HTML formstitle> head> body>  form> input type="text" value="Tutorix is the best e-learning platform" onclick="this.value=''"/>  form> body> html> 
 

Example 4

You can try to run the following code to clear all the input in HTML forms −

DOCTYPE html> html> body>  form> Student Name:br> input type="text" name="sname"> br> Student Subject:br> input type="text" name="ssubject"> br> input type="reset" value="reset">  form> body> html> 
 

Once the reset button is clicked, the form is cleared.

Источник

How to create a button to clear the input field

It’s a good idea to allow users to clear the input with push of a button. Lets look at how you can add a clear button to the input field.

The first thing you need to know is that the input tag with the type=»search» has a clear button by default.

 type="search" placeholder="Search. " /> 

The default clear button will appear once user has typed something in to the input field.

Markup

However it’s not working in all browsers, Firefox doesn’t have such functionality.

Also you may want to add clear button to other input types, like text , email , etc.

To add a button we’ll need to slightly modify the HTML.

💡 NOTE: If it’s a search type input, be aware that you might want to display a search icon as well.

One way to do that is if it’s a standalone input field, you can wrap it in a form tag. Or if it’s a single input already inside a form you can add a button tag with reset type.

For close (cross) charachter we’ll use an HTML entity, times symbol — “×”. It’s a simple and quick way to show a close character. Ofcourse you can also use a font or an SVG.

The reset button, will reset all form values, in this particular case it will clear the one and only input field. The main benefit is that you don’t need to add any additional JavaScript to clear the field. Form reset is a native behavior.

 class="clear-input-container">  class="clear-input" type="text">  class="clear-input-button" type="reset" aria-label="Clear input" title="Clear input" >×  

If you have a specific input you want to clear, the idea is similar. Wrap input tag inside a div and add a button.

 class="clear-input-container">  class="clear-input" type="text">  class="clear-input-button" aria-label="Clear input" title="Clear input" >×  

In both cases, input and button are contained in a single wrapper element.

Styling

Whether you choose to use form or div element as a container the CSS will be the same.

First we need to set container element to have a position: relative , so that we can align the clear button later.

And set it to display: inline-block so that it takes the size (width and height) of the input .

.clear-input-container  position: relative; display: inline-block; > 

The clear button has to be positioned reative to the container with position: absolute . Now we can set it to be at the end of the input , which is right side for LTR direction.

Additionally to positioning properties, we need to style the visual appearance of the button.

.clear-input-button  /* button position */ position: absolute; right: 4px; top: 4px; bottom: 0; /* button appearane */ justify-content: center; align-items: center; width: 16px; height: 16px; appearance: none; border: none; border-radius: 50%; background: gray; margin: 0; padding: 2px; color: white; font-size: 13px; cursor: pointer; /* hide the button initially */ display: none; > .clear-input-button:hover  background: darkgray; > 

We’ll hide the button to make it visible only when use input a value. We’ll add a custom class with JavaScript to the input field if if has a value.

And we’ll set some styles to show the clear button with the touched input.

.clear-input--touched:focus + .clear-input-button, .clear-input--touched:hover + .clear-input-button, .clear-input--touched + .clear-input-button:hover  display: inline-flex; > 

Functionality

To make the button visible on input value change lets add an event listener, which will add a custom class name. and toggle on focus (if there’s a value)

const input = document.querySelector(".clear-input") const handleInputChange = (e) =>  if (e.target.value && !input.classList.contains("clear-input--touched"))  input.classList.add("clear-input--touched") > else if (!e.target.value && input.classList.contains("clear-input--touched"))  input.classList.remove("clear-input--touched") > > input.addEventListener("input", handleInputChange) 

Finally, we need to clear the input on button click.

If you’re using the form with a button type reset , then you don’t need additional JavaScript.

Otherwise lets add an event listener for clear button.

const input = document.querySelector(".clear-input") const clearButton = document.querySelector(".clear-input-button") const handleButtonClick = (e) =>  input.value = '' input.focus() input.classList.remove("clear-input--touched") > clearButton.addEventListener("click", handleButtonClick) 

As you can see from the code above, on button click, we set the input value to an empty string.

Additionally, we leave input focused and remove the clear-input—touched class to hide the clear button.

Demo

You can find a full demo with a complete code examples on my CodePen:

See the Pen Untitled by Nikita Hlopov (@nikitahl) on CodePen.

Источник

How do I put a clear button inside my HTML text input box like the iPhone does?

I want to have a nice little icon that, when clicked will clear the text in the box. This is to save space rather than having a clear link outside of the input box. My CSS skills are weak. Here is a screenshot photo of how the iPhone looks.

11 Answers 11

Supported browsers will automatically render a usable clear button in the field by default.

The clear button is a ::-webkit-search-cancel-button CSS pseudo-element automatically inserted by Webkit/Blink-based browsers (though it’s technically still a non-standard feature).

If you use Bootstrap, you’ll have to add a CSS override to force the pseudo-element to show:

input[type=search]::-webkit-search-cancel-button

Officially, the -webkit-search-cancel-button psuedo-element is non-standard and should not be relied upon as a built-in HTML feature across browsers.

Notably Firefox does not render the clear button by default as of version 110, but they have plans to enable it eventually: https://bugzilla.mozilla.org/show_bug.cgi?id=1654288. You can check up-to-date browser compatibility information on MDN or CanIUse.com.

The most reliable, future-proof, cross-browser approach is to use a form with an explicit element nearby to allow clearing the Search form with a button. This also makes it easier to add accecibility hints and style the clear button directly with CSS.

Extras: Safari/WebKit browsers can also provide extra features when using type=»search» , like results=5 , enterkeyhint=». » , and autosave=». » , but they also override many of your styles (e.g. height, borders) . To prevent those overrides, while still retaining functionality like the X button, you can add this to your css:

See the MDN Documentation, CanIUse.com, or CSS-Tricks.com for more complete and up-to-date info about the features provided by in browsers today.

Источник