Form input inconsistencies

Here's a question for you: imagine that you've got an HTML form something like this:

Your name Your favourite food Save preferences Now imagine that a user clicks the Save preferences button and submits the form. What does the network payload look like? I thought that it would look something like name=&favourite_food=—that is to say, that the name and favourite_food variables would be submitted as empty strings—but that's not the case. It submits instead firstname=, and that's it. The empty is ignored. Same goes for if you pull the ol' select placeholder trick: Can't seem to find anything about it on MDN—hopefully this helps someone else struggling to find their data on the backend! Update: As Šime Vidas points out on Twitter, this is because "only non-disabled, selected So the actual value of the select comes from the itself. I love to find out that HTML elements fit together like that. And it also means, given the above select: const select = document.querySelector('[name="favourite_food"]'); console.log(select.value) // => ""