HTML form submitting with a symbol illustration

I am currently facing an issue with my website. I would like to create a search button using the symbol from fontawesome (

<i class="fas fa-search"></i>
), but I am unsure how to replace the form submission button with this symbol in order to submit the form.

<form id="searchForm">
  <div class="search-box">
    <input class="search-txt" type="text" name=""
        placeholder="Type to search" id="inputBox">
    <div class="search-btn">
      <input type="submit" value="Search">
      <i class="fas fa-search"></i>
    </div>
  </div>
</form>

Currently, when using this code it displays both the Submit button and the symbol simultaneously.

Your assistance in resolving this matter would be greatly appreciated.

htmlcssforms

Answer №1

It is recommended to use a button with the type of submit:

<button type="submit" value="Search">
  <i class="fas fa-search"></i> 
</button>

By setting the type attribute to submit, the button will function in the same way as an input with type="submit".

Answer №2

If you want to change the submit button type, consider using a regular button instead.

<button type="submit">
   <i class="fas fa-search"></i>
</button>

You can customize the button styles to fit your website's aesthetics.

Answer №3

Can you lend a hand?

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<form id="searchForm">
  <div class="search-box">
    <input class="search-txt" type="text" name="" placeholder="Type to search" id="inputBox">
    <div class="search-btn">
      <button onclick="this.form.submit()"><i class="fa fa-align-center fa-save"> Submit</i></button>
    </div>
  </div>
</form>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Connecting onClick event to a dynamically created div using Dojo

While working with dojo 1.9.2, I encountered an issue when trying to add an onClick function to a dynamically created piece of HTML code like so: clickableDiv = "<div data-dojo-attach-point=\"testBtn\">Click Me!</div>"; self.racks.in ...

javascripthtmldojo

When there is an absence of data, the jQuery datatable mysteriously van

I have encountered an issue in my Django app where a datatable used in the template disappears if there is missing data in any column or row. The problem occurs when trying to download the data in CSV, Excel, PDF, or copy format. Here is the HTML code snip ...

javascriptjqueryhtmldjango-templates

Is there a bug in Firefox when using the multicolumn columns property with Flexbox?

Could this be a compatibility issue with Firefox? The layout appears fine in Chrome or when I take out columns: 2, then it also displays correctly in Firefox. div { width: 500px; padding: 2rem; display: inline-flex; align-items: baseline; bor ...

cssfirefoxflexboxcss-multicolumn-layout

Is it just me, or does the float left - float right combination only break in IE

Oh dear, it seems like IE9 is causing some trouble again. The other "capable" browsers handle this HTML just fine, including IE8 which isn't even that great. Here's the code snippet: <div class="contact_info_city" id="contact_info_cityX"> ...

htmlcssinternet-explorercss-floatline-breaks

Having trouble with CSS background-attachment not functioning properly and unable to adjust padding or margins on the background

Currently, I am in the process of learning CSS and HTML5. However, I am experiencing some difficulty when it comes to implementing basic elements. Specifically, I am using Google Chrome and attempting to create a top bar for my webpage. This top bar should ...

csshtml

The issue I am facing with this self-closing TITLE tag causing disruption to my webpage

I am encountering a problem with my basic webpage. <html> <head> <title/> </head> <body> <h1>hello</h1> </body> </html> When viewed in both Chrome and Firefox, the webpage ...

csshtml

Header with absolute positioning doesn't play nice when nudged in Chrome

Take a look at the HTML page on this JSFiddle link: http://jsfiddle.net/rb8rs70w/2/ The page features a "sticky" header created using CSS with the property position: absolute. ... <body class="body-menu-push"> <header role="banner"> ...

htmlcssgoogle-chrome

Express is causing an issue with the AngularJS loading process

When I view the index.html file in a browser, everything works fine. However, when I try to run it on a local server using Express, it doesn't work as expected. Server.js const express = require('express'); const app = express(); app.get ...

htmlangularjsnode.jsexpress

Tips for integrating an HTML template into a React project

I'm finding it challenging to integrate an HTML template into React. The template I am using is for an admin dashboard with multiple pages. I have successfully copied and pasted the HTML code into JSX files and fixed any syntax issues. Here's wh ...

javascripthtmlreactjs

How can I trigger a CSS animation to replay each time a button is clicked, without relying on a timeout function?

I am having trouble getting a button to trigger an animation. Currently, the animation only plays once when the page is refreshed and doesn't repeat on subsequent clicks of the button. function initiateAnimation(el){ document.getElementById("anima ...

javascripthtmlcssanimation

What is the solution to prevent background-attachment:fixed; from distorting the image?

Looking to create a scrolling background image that doesn't stretch? Typically, using background-attachment: fixed; works, but it's causing the image to stretch and lose positioning capabilities. If you want to see the issue in action, check out ...

htmlcssbackground-imagestretch

"Troubles with directing on websites using jQuery, CSS,

I have been struggling with creating this navigation bar for weeks now and I keep running into issues. What I am attempting to achieve is a primary navigation bar that, when hovered over, displays a secondary navigation menu below and slightly to the righ ...

jqueryhtmlcssnavigation

The width of Highcharts increases proportionally to the growth of the chart's width

I want to create a highcharts graph where the width increases as data points increase. Currently, I have: I am using vuejs with highcharts, but it should work similarly with jquery or other frameworks. <div class="col-md-6" style= ...

javascriptcsshighcharts

Various Plus/Minus Containers

One issue I am facing is that when using multiple counters on the same page, my - and + buttons to decrease or increase the number in a text box do not function properly. The script provided below works for one counter. How can I modify this code so that ...

javascriptjqueryhtml

Incorporating HTML5 & CSS3: Leveraging various Pseudo classes and the translateX/Y properties

As a graphic designer dabbling in HTML5, I have to admit that coding is not my strong suit. Despite that, I've been able to troubleshoot most of my issues thus far. However, I've hit a bit of a snag. The problem arises when clicking on a thumbna ...

htmlcsstranslatepseudo-class

I'm feeling a bit lost on how to bring my random quote generator to life

I'm attempting to add animation to my random quote generator by making it look like another card is being flipped on top of the existing one, similar to a deck of cards. With limited coding knowledge, I followed a tutorial and made some adjustments to ...

javascriptcssrandomjquery-animatecss-animations

Is there a way to retrieve content in tinymce from a JSP file and send it to a servlet that then redirects to a different page

I need guidance on how to store the content from the tinymce editor and post it with a new page creation. What steps should I take? ...

jqueryhtmlajaxjspservlets

Styling a Razor view using inline CSS and responsive media queries

I need to add some simple inline styling for print purposes to an .cshtml page I'm working on. I initially tried using the @media print media query, but it is causing issues with my cshtml page. Is there a workaround for this problem? The culprit see ...

asp.netasp.net-mvccssasp.net-mvc-4razor

What is the process for performing a redirection in Node JS?

I have been working on a task to redirect a page to the home page with the route '/search' upon form submission. Within my submit.html file, there is a form that utilizes the '/submit' post method to submit the form data when the submit ...

javascriptnode.jsformshttp-redirectexpress

Developing interactive filter buttons with unique identifiers to sort and display elements that share the same identifier

My website has filtering buttons labeled "UI, DEVELOPMENT, DATABASE, etc." <ul class="tags_list"> <li><a href="#" id="tag_ui">Ui</a></li> <li><a href="#" id="tag_database">Database</a></li> ...

jqueryhtmlfilter