Skip to content

Latest commit

 

History

History
62 lines (50 loc) · 2.76 KB

19-react-make-basic-forms-with-react-cfc2ec08.md

File metadata and controls

62 lines (50 loc) · 2.76 KB

19. Make Basic Forms with React

📹 Video

💻 CodeSandbox

Notes

  • Forms are a basic building block of the web. Every web application uses form elements as a way to accept input from the user.
  • There are a few things to keep in mind with how forms work on the web and in this lesson we’ll learn about those as well as various ways you can retrieve values from elements in the form as well as a few best practices you should consider when working with form elements on the web.
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
  <script type="text/babel">
    function UsernameForm() {
      // When submitting a form, it automatically makes a post request with the data
      function handleSubmit(event) {
        // preventing from automatically sending a post request/full page refresh
        event.preventDefault();
        // Please don't use this:
        // document.querySelector('input').value, this breaks the encapsulation

        // we can access the form element directly, console.dir(event.target)
        // one option: const username = event.target[0].value
        // If ref is not needed, then use the id
        const username = event.target.elements.usernameInput.value;
        // Alerting this to users or sending this to backend server
        alert(`You entered: ${username}`);
      }

      return (
         {/* Creating a form  */}
        <form onSubmit={handleSubmit}>
          <div>
            {/* adding a label - htmlFor="usernameInput" */}
            <label htmlFor="usernameInput">Username:</label>
            <input id="usernameInput" type="text" />
          </div>
          {/* Forms are automatically submitted on type="submit*/}
          {/* Make sure to specify the type on the button */}
          <button type="submit">Submit</button>
        </form>
      );
    }

    ReactDOM.render(<UsernameForm />, document.getElementById('root'));
  </script>
</body>
  • You can learn more about basic forms in the React documentation about Uncontrolled Components.

Additional resource