Create a search bar using HTML and CSS that utilizes the GET method

Question

Create a search bar using HTML and CSS that utilizes the GET method

My current challenge involves creating a search functionality using HTML based on the username entered, such as 'user'.

Upon clicking the search bar, the page should redirect to http://localhost/searchuser/user

I am encountering difficulties with implementing this feature using the GET method from the input field.

Can someone confirm if my usage of

<form action="/searchuser" + username>

is correct?

Snippet:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {box-sizing: border-box;}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

(Additional CSS and HTML content removed for brevity...)

html css

Answer 1

Answer №1

No, inline JavaScript code cannot be added to all HTML attributes. Only event attributes like onclick have this capability. To achieve a similar effect, you can add a listener to the blur event of a text input field. Within this listener, you can dynamically change the action attribute of a form based on the user's input.

<form action="" id="form">
  <input type="text" placeholder="Username.." onchange="document.getElementById('form').action = '/searchuser/' + this.value;" name="username">
  <button type="submit"><i class="fa fa-search"></i></button>
</form>

It is important to note that even event attributes should enclose any JavaScript code within quotation marks.

action="/searchuser" + username

Furthermore, it is worth mentioning that from is not a valid HTML attribute.

Answer 2

No, inline JavaScript code cannot be added to all HTML attributes. Only event attributes like onclick have this capability. To achieve a similar effect, you can add a listener to the blur event of a text input field. Within this listener, you can dynamically change the action attribute of a form based on the user's input.

<form action="" id="form">
  <input type="text" placeholder="Username.." onchange="document.getElementById('form').action = '/searchuser/' + this.value;" name="username">
  <button type="submit"><i class="fa fa-search"></i></button>
</form>

It is important to note that even event attributes should enclose any JavaScript code within quotation marks.

action="/searchuser" + username

Furthermore, it is worth mentioning that from is not a valid HTML attribute.

Create a search bar using HTML and CSS that utilizes the GET method

Answer №1

Similar questions

Attempting to align input fields and spans side by side

Issue with the footer not remaining at the bottom of the page

Excessive margin-left values for CSS div positioning are simply outlandish

Sorting of tables does not function properly following an ajax request

Create engaging text animation by transitioning from horizontally displayed text to vertically displayed text with the letters standing upright using An

Repeat the execution or refresh an EventListener

Passing a string to a function in AngularJS through ng-click

The HTML page is failing to call the function in the JavaScript application

Wrapping header text in Vuetify's v-data-table

How can we reduce the use of !important in SCSS when working with React and Material UI?

Finding the text content of a div element using react testing library

Icons positioned centrally while floating to the left

Error encountered when attempting to access a dropdown menu on a website due to a NoSuchElementException

Achieving success with the "silent-scroll" technique

Creating a contact form using HTML and PHP

Why is Chrome not enforcing the maximum attribute for input type number in HTML5?

Using clip-path in SVG works perfectly on images, but unfortunately it does not work on div

Embedding a file in a word document with a hyperlink

Using jQuery to change the `class` of the parent `div` based on the length of a `p`

Setting the title of the master page body dynamically