Main Form Elements

2.1 Element <input>

Forms are crucial parts of web pages and let users input and submit data. The main form elements are <input>, <textarea>, and <button>. These elements let users input text, select options, upload files, and do other actions.

The <input> element is one of the most frequently used form elements. It supports various input types and can be used for different tasks like text input, file selection, specifying dates, etc.

General Syntax:

    
      <input type="type" name="name" id="id" value="value" placeholder="placeholder" required>
    
  

<input> Attributes

• type: defines the input type
• name: the form element's name, used to identify data on the server
• id: the unique identifier of the element
• value: the element's initial value
• placeholder: the hint text shown inside the element before input
• required: indicates the element is a required field

<input> Example

input-text allows you to enter a single line of text.

    
      <input type="text" name="username" id="username" placeholder="Enter username" required>
    
  

2.2 Element <textarea>

The <textarea> element is used for multi-line text input. It differs from <input type="text"> as it allows entering text with multiple lines and can be resized.

General Syntax:

    
      <textarea name="name"
        id="id"
        rows="rows" cols="cols"
        placeholder="placeholder" required>
      </textarea>
    
  

<textarea> Attributes

• name: the form element's name, used to identify data on the server
• id: the unique identifier of the element
• rows: number of text lines
• cols: number of characters per line
• placeholder: the hint text shown inside the element before input
• required: indicates the element is a required field

Usage Example:

    
      <label for="comments">Comments:</label>
      <textarea name="comments"
        id="comments"
        rows="5"
        cols="40"
        placeholder="Enter your comments here..."
        required>
      </textarea>
    
  

Styling <textarea>

The <textarea> element can be styled with CSS to enhance the look and user experience.

Styling Example:

    
      textarea {
        width: 75%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical; /* resizing will be only vertical */
      }
    
  

    
      <label for="comments">Comments:</label>
      <textarea name="comments"
        id="comments"
        rows="5" placeholder="Enter your comments here..." required>
      </textarea>
    
  

2.3 Element <button>

The <button> element is used to create buttons in forms. Unlike <input type="button">, the <button> element is more flexible, allowing you to include various HTML elements like text, images, etc., within the button.

General Syntax:

    
      <button type="type" name="name" id="id" value="value">Button Text</button>
    
  

Usage Example:

    
      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
      <button type="button" onclick="alert('Button clicked!')">Click me</button>
    
  

<button> Attributes

1. type: defines the button's behavior. Possible values:
   • submit: sends the form (default value)
   • reset: resets the form
   • button: arbitrary button, doesn't perform default actions
2. name: the form element's name, used to identify data on the server.
3. id: the unique identifier of the element.
4. value: the value sent to the server upon form submission.

HTML Inside <button>

The <button> element allows embedding various HTML elements inside it to create more complex buttons.

Example with Embedded HTML:

    
      <button type="type" name="name" id="id" value="value">
        📨Send
      </button>
    
  

    
      <button type="type" name="name" id="id" value="value">
        <img src="submit_icon.png" alt="Send">
        Send
      </button>
    
  

Styling <button>

The <button> element can be styled with CSS to enhance the look and user experience.

Styling Example:

    
      button {
        background-color: #4CAF50; /* Green background */
        color: white; /* White text */
        padding: 15px 20px; /* Padding */
        border: none; /* No border */
        border-radius: 4px; /* Rounded corners */
        cursor: pointer; /* Pointer cursor */
      }

      button:hover {
        background-color: #45a049; /* Dark green background on hover */
      }
    
  

    
      <button type="submit">Send</button>
    
  

1

Task

Frontend SELF EN, level 8, lesson 2

Locked

Text Field

Text Field

Open

1

Task

Frontend SELF EN, level 8, lesson 2

Locked

Buttons

Buttons

Open