Should 'form' be used here, or is it not necessary?

HTML & CSS
1

Should form be used in this code, or no?

I don’t think it would be used here because I’m not submitting anything.
All I’m doing is capturing individual user inputs. And inputs can be used without forms.

Form Added

<div class="info">
  <form>
    <label for="input">Stream</label>
    <input id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" />
    <input id="sent" type="submit" value="Set" />
  </form>
</div>

  sent.addEventListener("click", function(evt) {
    player.src = value.value;
    player.volume = 1.0;
    // Prevent default form handling (which would reload the page, in this case)
    evt.preventDefault();
  });
}());

Form Removed:

<div class="info">
    <label for="input">Stream</label>
    <input id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" />
    <input id="sent" type="submit" value="Set" />
</div>

  sent.addEventListener("click", function(evt) {
    player.src = value.value;
    player.volume = 1.0;
  });
2

The question has been answered in your other thread:

If you did use the <form> element, why would you also retain the <div>? You can add the class to the form for styling.

2 Likes
3

This needs to be added to the javascript if form is used:

// Prevent default form handling (which would reload the page, in this case)
evt.preventDefault();

4

Yes that’s called graceful degradation. When js is enabled you don’t want the form to submit.

If no js is present then post the form and handle all the changes serverside and return the page in its new state.

As I said its not invalid to have controls outside of a form especially if you are not going to handle the serverside implications but just beware that some users do not have js enabled. It’s not so much of an issue these days but what you need to do is make your page work without JS first and then enhance it with js afterwards and then you are on the right track.

2 Likes
5

div removed:

form {
  display: table-cell;
  white-space: nowrap;
}  

<form>
    <label for="input">Stream</label>
    <input id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" />
    <input id="sent" type="submit" value="Set" />
  </form>
6

I found a lot of information on that here:

What percentage of browsers have JavaScript disabled?
https://blockmetry.com/blog/javascript-disabled

7

Off Topic:

Brief, but very informative:

https://kryogenix.org/code/browser/everyonehasjs.html

4 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.