Disclaimer: I’m a backend programmer and I would like to minimize javascript code in my webpages.

I’m considering using the login form given here as example. In this example we have this

<form class="ui large form">
  <div class="ui stacked segment">
    <div class="field">
      <div class="ui left icon input">
        <i class="user icon"></i>
        <input type="text" name="email" placeholder="E-mail address">
      </div>
    </div>
    <div class="field">
      <div class="ui left icon input">
        <i class="lock icon"></i>
        <input type="password" name="password" placeholder="Password">
      </div>
     </div>
     <div class="ui fluid large teal submit button">Login</div>
  </div>
  <div class="ui error message"></div>
</form>

The login button is just a div which does nothing. There is no action argument in the form tag and there is no submit type input tag.

How do I get the page to send the input field values back to the backend server ?

Note that there is some javascript code visible in the source page that checks the validity of the fields. But there is no hint on how to get send the email and password to the backend and load the logged in page.

Disclaimer: I’m a backend programmer and I would like to minimize javascript code in my webpages.

I’m considering using the login form given here as example. In this example we have this

<form class="ui large form">
  <div class="ui stacked segment">
    <div class="field">
      <div class="ui left icon input">
        <i class="user icon"></i>
        <input type="text" name="email" placeholder="E-mail address">
      </div>
    </div>
    <div class="field">
      <div class="ui left icon input">
        <i class="lock icon"></i>
        <input type="password" name="password" placeholder="Password">
      </div>
     </div>
     <div class="ui fluid large teal submit button">Login</div>
  </div>
  <div class="ui error message"></div>
</form>

The login button is just a div which does nothing. There is no action argument in the form tag and there is no submit type input tag.

How do I get the page to send the input field values back to the backend server ?

Note that there is some javascript code visible in the source page that checks the validity of the fields. But there is no hint on how to get send the email and password to the backend and load the logged in page.

• javascript
• html
• forms
• user-interface
• frontend

• Is there something which prevents you from manipulating the DOM? – Slava Knyazev Commented Feb 17, 2020 at 16:59
• 1 The HTML5 placeholder attribute is not a substitute for the label element – Quentin Commented Feb 17, 2020 at 17:00
• 1 "The login button is just a div which does nothing. There is no action argument in the form tag and there is no submit type input tag." Why not? These are the basics of HTML Forms and it sounds like you are willingly and flagrantly flouting them. If you want things to work, use them according to the instructions – Heretic Monkey Commented Feb 17, 2020 at 17:04
• @Quentin I understand the argument. We could add to it that the hardly readable placeholder value does not respect accessibility rules. But in this case, the icons in front of the text fields give a visual queue on the expected content. It is the same with a seach field if the icon was a magnifying glass. But for a more general form with multiple fields, I definitely agree with the argument. – chmike Commented Feb 17, 2020 at 17:42
• @chmike — If you want to label a form control with an image, then that is fine. <label for="field_id"><img src="mag.png" alt="Search"></label>. – Quentin Commented Feb 17, 2020 at 22:09

1 Answer 1

The login button is just a div which does nothing

Make it a <button>.

There is no action argument in the form tag

Add one if you want the data to be submitted to a different URL then that of the current page.

Your form should also be method="POST". Passwords do not belong in URLs (which are often logged in plain text).

How do I get the page to send the input field values back to the backend server ?

Use a <button> element to represent your submit button and not a <div> element. The <div> element is when you need a block element and HTML lacks an element with the semantics to describe your content. That isn't the case here, you want to submit a form and that is what submit buttons are for.