[Latihan] 45 Soal TKP CPNS 2023

In HTML (Hypertext Markup Language), forms are used to collect and process user input on a web page. Forms provide a way for users to interact with a website by entering data and submitting it to the server for further processing. The primary components of an HTML form are the <form> element and various input elements that allow users to enter different types of data.

Here's an explanation of the main components related to forms and input in HTML:

1. <form> element

The <form> element is a container that wraps all the input elements and defines the structure of the form. It has several attributes that specify how the form should behave and where the data should be sent when the form is submitted. 

The <form> element in HTML can be expanded with several attributes that control its behavior and appearance. Here's a more comprehensive explanation of the attributes that you can use with the <form> element:

a. action (required)

Specifies the URL or script to which the form data should be sent when the user submits the form. This attribute is mandatory for form submission.

Example:

<form action="/submit_form.php" method="post">
  <!-- Input elements go here -->
</form>

b. method(optional, default: "GET")

Defines the HTTP method used to submit the form data. The two most common methods are "GET" and "POST."

• "GET": Appends the form data as URL parameters in the action URL. Suitable for retrieving data or performing searches.
• "POST": Sends the form data in the request body. Suitable for sensitive or large data as it is not directly visible in the URL.

Example:

<form action="/submit_form.php" method="post">
  <!-- Input elements go here -->
</form>

c. target (optional)

Specifies where to display the response after submitting the form. The value can be "_blank" to open the response in a new tab/window or the name of an iframe to load the response within the iframe.

Example:

<form action="/submit_form.php" method="post" target="_blank">
  <!-- Input elements go here -->
</form>

d. enctype (optional)

Specifies the encoding type to use when submitting the form data to the server. This is required if the form includes a file input (<input type="file">) to upload files.

• "application/x-www-form-urlencoded": Default value. Encodes the form data in key-value pairs (similar to URL parameters).
• "multipart/form-data": Used for file uploads. Encodes the form data as a multipart message.

Example:

<form action="/submit_form.php" method="post" enctype="multipart/form-data">
  <!-- Input elements go here, including file input -->
</form>

e. autocomplete (optional):

Specifies whether browser autocomplete features should be enabled for the form fields. This attribute can take the values "on" or "off."

Example:

<form action="/submit_form.php" method="post" autocomplete="on">
  <!-- Input elements go here -->
</form>

f. novalidate (optional)

When present, this boolean attribute disables form validation. By default, browsers perform basic form validation for required fields and input types (e.g., email, number).

Example:

<form action="/submit_form.php" method="post" novalidate>
  <!-- Input elements go here -->
</form>

g. name (optional):

Specifies a name for the form. This can be useful when working with JavaScript to reference the form element.

Example:

<form action="/submit_form.php" method="post" name="registrationForm">
  <!-- Input elements go here -->
</form>

These are the main attributes that you can use with the <form> element to customize its behavior. Remember that the input elements within the form should have appropriate name and id attributes so that the form data can be properly identified and processed on the server-side.

2. Input elements

There are various types of input elements that allow users to enter different types of data. The most commonly used input elements include:

• <input type="text">: A single-line text input field.
• <input type="password">: A text input field where the entered text is masked (useful for passwords).
• <input type="email">: A text input field designed to accept email addresses and usually has email validation.
• <input type="number">: A text input field for entering numeric values.
• <input type="checkbox">: A checkbox for selecting multiple options.
• <input type="radio">: A radio button for selecting one option from a group of choices.
• <input type="submit">: A button to submit the form data to the server.
• <input type="reset">: A button to reset the form to its initial state.

Example:

<form action="/submit_form.php" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>

  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="18" max="100" required>

  <label for="subscribe">Subscribe to newsletter:</label>
  <input type="checkbox" id="subscribe" name="subscribe">

  <label for="gender">Gender:</label>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label>

  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
</form>

In HTML, input elements provide various ways for users to enter data into a form. Here's an expansion of the commonly used input elements:

a. <input type="text">

Represents a single-line text input field. Users can enter alphanumeric text in this field.

Example:

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

b. <input type="password">

Represents a text input field where the entered text is masked (usually shown as dots or asterisks). This is commonly used for password input fields.

Example:

<input type="password" name="password" id="password" placeholder="Enter your password" required>

c. <input type="email">

Represents a text input field specifically designed for email addresses. It often includes email validation to ensure a valid email format.

Example:

<input type="email" name="email" id="email" placeholder="Enter your email" required>

d. <input type="number">

Represents a text input field for entering numeric values. You can specify optional attributes like min and max to define the allowed range.

Example:

<input type="number" name="age" id="age" min="18" max="100" placeholder="Enter your age" required>

e. <input type="checkbox">

Represents a checkbox that allows users to select one or more options from a list of choices. The value attribute defines the value submitted when the checkbox is checked.

Example:

<input type="checkbox" name="interest" id="interest1" value="sports">
<label for="interest1">Sports</label>
<input type="checkbox" name="interest" id="interest2" value="music">
<label for="interest2">Music</label>

f. <input type="radio">

Represents a radio button that allows users to select one option from a group of choices. All radio buttons within a group should have the same name attribute, and different id attributes.

Example:

<input type="radio" name="gender" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="female">
<label for="female">Female</label>

g. <input type="submit">

Represents a button used to submit the form data to the server when clicked. The text displayed on the button can be defined using the value attribute.

Example:

<input type="submit" value="Submit">

h. <input type="reset">

Represents a button that resets all form fields to their initial values when clicked.

Example:

<input type="reset" value="Reset">

i. <input type="file">

Represents a control that allows users to select files from their device to be uploaded to the server. The form's enctype attribute must be set to "multipart/form-data" for file uploads.

Example:

<input type="file" name="file_upload" id="file_upload">

j. <input type="date">, <input type="time">, <input type="datetime-local">, <input type="month">, <input type="week">

These input types allow users to select dates, times, and specific combinations of date and time as per the input type. They provide a user-friendly way of entering date and time data.

Example:

<input type="date" name="birthdate" id="birthdate">
<input type="time" name="meeting_time" id="meeting_time">
<input type="datetime-local" name="event_datetime" id="event_datetime">
<input type="month" name="membership_month" id="membership_month">
<input type="week" name="vacation_week" id="vacation_week">

These are some of the most commonly used input elements in HTML forms. Each input element has specific attributes that can be used to customize its behavior and appearance. When using input elements, make sure to set appropriate name and id attributes to handle and identify the form data correctly on the server-side and within your JavaScript code.

In the above example, we have a simple registration form with various input elements to collect information like username, email, password, age, subscription status, and gender. The form will be submitted to the server using the HTTP POST method when the user clicks the "Submit" button.

Keep in mind that forms can be much more complex, involving additional elements like text areas, select menus, and file inputs, among others. However, the basic structure and usage of forms and input elements remain the same.

Related Posts