Submit button



Would you like to customize the submit button to better fit your site’s design or personality? The submit button of your form can play an important role in submission rates. In this guide, we’ll cover how to customize the text and style of your form’s submit button.

  • Change the Submit Button Text
  • Style the Submit Button
  • Customize Hover Styles
  • Example CSS

Change the Submit Button Text

To change the ‘Submit’ text of your form’s button, open the form builder to Settings » General. Here, you’ll see two fields for setting the text in the submit button:

Customizing the submit button text

  • Submit Button Text: The text shown when this button hasn’t been clicked yet
  • Submit Button Processing Text: The text shown after the user clicks this button, but before the confirmation is shown to the user

Submit button

You can go ahead and change the text of the submit button according to your preference. Once you’re satisfied with the changes, go ahead and save the form.

Style the Submit Button

CSS provides incredible flexibility to customize the submit button, as well as any other aspect of your form.

If you’re new to CSS or would like a refresher, the best place to start is with our introductory guide to CSS.

Here’s the default CSS for a WPForms submit button, as well as comments to note what each line of CSS does:

  div.wpforms-container-full .wpforms-form input[type=submit],   div.wpforms-container-full .wpforms-form button[type=submit] {   background-color: #eee; /* Grey background */   border: 1px solid #ddd; /* Dark grey border */   color: #333; /* Black text color */   font-size: 1em; /* Size of text */   padding: 10px 15px; /* Distance between text and border */  }  

You can change any of these values to style the button differently. As an example, let’s start by giving our button a yellow background.


The first step is to find the hex code for the color we want – htmlcolorcodes.com or Adobe Color CC are handy free tools for this.

Once we have the hex code for the shade of yellow we want, we can create our CSS:

  div.wpforms-container-full .wpforms-form input[type=submit],   div.wpforms-container-full .wpforms-form button[type=submit] {   background-color: #FAF243; /* Yellow background */  }  

Next, we need to add this CSS to our site. The simplest way to do this is by using the WordPress CSS Editor. To open this, go to Appearance » Customize and select Additional CSS.

Add custom CSS to WordPress

Once you’ve opened the Additional CSS section, you can paste in your new CSS, click the Save & Publish button, and you’re all set!

WordPress CSS editor

Below is what our button will look like now, with this CSS applied:

Custom submit button


Customize Hover Styles

CSS allows you to apply completely different styles when a cursor hovers over a button. This change in style helps user experience because it lets the user know that this object is clickable.

Below is the default CSS in WPForms when a button is hovered over. As noted in the comments, the background color becomes a little darker and the border color becomes a little lighter:

  div.wpforms-container-full .wpforms-form input[type=submit]:hover,   div.wpforms-container-full .wpforms-form input[type=submit]:active,   div.wpforms-container-full .wpforms-form button[type=submit]:hover,   div.wpforms-container-full .wpforms-form button[type=submit]:active,   div.wpforms-container-full .wpforms-form .wpforms-page-button:hover,   div.wpforms-container-full .wpforms-form .wpforms-page-button:active {   background-color: #ddd; /* Darker grey background */   border: 1px solid #ccc; /* Lighter grey border */  }  

You might notice that this is a lot less CSS than we saw for the button when it’s not hovered over. This is because CSS will apply all of the earlier CSS to your hovered button unless told otherwise.

If you leave the default styles, for example, the text color will remain black when the button is hovered over. This is because the button’s text color would normally be black, and we haven’t told it to change upon hover.

As with the previous custom CSS example, you can change any of these values to style the button’s hover styles differently. For our example, we’ll give the button a darker yellow background when hovered over.


  div.wpforms-container-full .wpforms-form input[type=submit]:hover,   div.wpforms-container-full .wpforms-form input[type=submit]:active,   div.wpforms-container-full .wpforms-form button[type=submit]:hover,   div.wpforms-container-full .wpforms-form button[type=submit]:active,   div.wpforms-container-full .wpforms-form .wpforms-page-button:hover,   div.wpforms-container-full .wpforms-form .wpforms-page-button:active {   background-color: #e5da00; /* Darker yellow background */  }  

Here’s what the button will look like with the CSS applied:

Submit button hover styles

Example CSS

Now that we’ve covered the basics, let’s go through a complete example of custom CSS for a submit button.

Here’s the CSS we’ll add for this example, which includes style changes for hovering:

  /* New button styles */  div.wpforms-container-full .wpforms-form input[type=submit],   div.wpforms-container-full .wpforms-form button[type=submit] {   padding: 15px; /* Increase distance between text and border */   width: 100%; /* Make the button full-width */   font-size: 1.5em; /* Increase text size */   background-c.  

age-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active { background-color: #860b0b; /* Dark red background */ border: 8px double #af0000; /* Red, double-line border */ }

Below is what our button will look like now, with this CSS applied:

New button CSS

And here’s what our button will look like when hovered over. Remember, the only changes are the background and border colors:

New button CSS on hover

That’s it! You can now customize your submit button using custom CSS.

Want more examples? Check out our tutorial with even more submit button CSS that you can copy and paste right into your site.

  • Still stuck? How can we help?
  • Last Updated on Nov 07, 2018

wpforms.com

Поддержка браузерами

Описание

HTML тег <button> создает кнопку, похожую на кнопку элемента <input> со значением submit, reset, button или image атрибута type. Однако, в отличие от элемента <input>, элемент <button> не относится к пустым элементам, то есть у него есть открывающий и закрывающий тег, между которыми можно расположить текст, изображения или другие HTML-элементы.

Когда браузер отображает элемент <button> на веб-странице, то весь элемент со всем его содержимым становится одной активной кнопкой. По умолчанию он будет иметь такой же внешний вид, как и кнопка, созданная с помощью <input type=»button»>, но из-за возможности содержать другие HTML-элементы он имеет гораздо больше возможностей для применения к нему CSS стилей.

Примечание: для изменения стандартного вида курсора при наведении на кнопку используйте CSS свойство cursor.

Атрибуты


autofocus:
Указывает браузеру, что кнопка должна получить фокус после загрузки страницы. Значения для логического атрибута autofocus можно задавать следующими способами:

  <button autofocus></button>  <button autofocus="autofocus"></button>  <button autofocus=""></button>  

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

disabled:
Отключает возможность нажатия кнопки. Это можно использовать в случае, когда кнопка должна стать активной при выполнение определенных условий (например, при выборе флажка и тд.), сделать кнопку активной можно будет с помощью JavaScript. Значения для логического атрибута disabled можно задавать следующими способами:

  <button disabled></button>  <button disabled="disabled"></button>  <button disabled=""></button>  
form:
Указывает к какой форме относится данная кнопка. В качестве значения выступает один или несколько идентификаторов форм, разделенных пробелами. Количество идентификаторов в значении атрибута зависит от количества принадлежащих кнопке форм:

  <!DOCTYPE html>  <html>  <body>     <form action="demo_form.html" method="get" id="nameform">   Имя: <input type="text" name="fname"><br>   Фамилия: <input type="text" name="lname">   </form>     <p>Кнопка находится вне элемента form, но является частью формы.</p>     <button type="submit" form="nameform" value="Submit">Отправить</button>    </body>  </html>  

Примечание: атрибут не поддерживается в Internet Explorer.


formaction:
Определяет адрес, куда пересылаются данные формы при нажатии на кнопку. Если для формы указан атрибут action, то атрибут formaction переопределит его значение:

  <!DOCTYPE html>  <html>  <body>     <form action="demo_form.asp" method="get">   Имя: <input type="text" name="fname"><br>   Фамилия: <input type="text" name="lname"><br>   <button type="submit">Отправить</button><br>   <button type="submit" formaction="demo_admin.html">  	 Отправить от имени администратора  	</button>  </form>    </body>  </html>  

Атрибут formaction используется только для кнопок с атрибутом type=»submit».

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

formenctype:
Указывает, каким способом данные формы должны быть закодированы перед отправкой на сервер. Используется только для кнопок с атрибутом type=»submit». Возможные значения атрибута:

  • application/x-www-form-urlencoded — все символы кодируются перед отправкой (значение по умолчанию).
  • multipart/form-data — символы не кодируются (этот метод используется при использовании форм, которые имеют файл управления загрузкой).
  • text/plain — пробелы преобразуются в символ «+», но символы не кодируются.

  <!DOCTYPE html>  <html>  <body>     <form action="demo_post_enctype.asp" method="post">   Имя: <input type="text" name="fname" value="Стив Баттлер"><br>   <button type="submit" >Отправить с кодирование символов</button>   <button type="submit" formenctype="text/plain">  	 Отправить без кодирования символов  	</button>   </form>    </body>  </html>  

Если для формы указан атрибут enctype, то атрибут formenctype переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

formmethod:
Указывает, какой метод HTTP будет использован при отправке данных формы. Используется только для кнопок с атрибутом type=»submit». Возможные значения атрибута:

  • get — данные формы добавляются в конце URL-адреса: URL-адрес?имя=значение?имя=значение
  • post — отправляет данные формы, как HTTP после транзакции

  <!DOCTYPE html>  <html>  <body>    <form action="demo_form.asp" method="get">   Имя: <input type="text" name="fname"><br>   Фамилия: <input type="text" name="lname"><br>   <button type="submit" >Отправить</button>   <button type="submit" formmethod="post" formaction="demo_post.asp">   Отправить используя POST   </button>  </form>    </body>  </html>  

Если для формы указан атрибут method, то атрибут formmethod переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

formnovalidate:
Указывает, что данные формы не будут проверяться на корректность. Используется только для кнопок с атрибутом type=»submit». Значения для логического атрибута autofocus можно задавать следующими способами:

  <button formnovalidate></button>  <button formnovalidate="formnovalidate"></button>  <button formnovalidate=""></button>  

Если для формы указан атрибут novalidate, то атрибут formnovalidate переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях, и в Safari.

formtarget:
Указывает, где будет отображен ответ после отправки формы. Используется только для кнопок с атрибутом type=»submit». Возможные значения атрибута:

  • _blank — открывает ответ в новом окне или вкладке.
  • _self — открывает ответ в той же директории, где располагается ссылка (значение по умолчанию).
  • _parent — открывает ответ в родительском окне.
  • _top — открывает ответ во всю ширину окна.
  • имя_фрейма — открывает ответ в iframe, имя которого было указано в качестве значения.
  <!DOCTYPE html>  <html>  <body>    <form action="demo_form.asp" method="get">   Имя: <input type="text" name="fname"><br>   Фамилия: <input type="text" name="lname"><br>   <button type="submit">Отправить</button>   <button type="submit" formtarget="_blank">   Оправить и открыть ответ в новом окне   </button>  </form>    </body>  </html>  

Если для формы указан атрибут target, то атрибут formtarget переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

name:
Указывает имя для элемента <button>. Он используется для ссылки на данные формы после ее отправки, или для ссылки на элемент в JavaScript.

  <!DOCTYPE html>  <html>  <body>    <form action="demo_form.asp" method="get">   Выберите одно из двух:   <button name="subject" type="submit" value="HTML">HTML</button>   <button name="subject" type="submit" value="CSS">CSS</button>  </form>    </body>  </html>  

Примечание: некоторые элементы <button> могут совместно использовать одно и то же имя. Это позволяет иметь несколько кнопок с одинаковыми именами, которым можно отправить разные значение при использование формы.

type:
Определяет тип кнопки:

  • button — активная кнопка
  • reset — кнопка, очищающая форму от введенных данных
  • submit — кнопка для отправки данных формы (значение по умолчанию)
  <!DOCTYPE html>  <html>  <body>    <form action="demo_form.asp" method="get">   Имя: <input type="text" name="fname"><br>   Фамилия: <input type="text" name="lname"><br>   <button type="submit" value="Submit">Отправить</button>   <button type="reset" value="Reset">Стереть</button>  </form>    </body>  </html>  

Примечание: всегда указывайте атрибут type для кнопок, потому что различные браузеры могут использовать разные значения по умолчанию для атрибута type.

value:
Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Примечание: если вы используете элемент <button> в HTML-форме, то IE7 и более ранние версии этого браузера, при отправке формы будут отправлять текст располагающийся между <button> и </button>. В то время как другие браузеры будут отправлять содержимое атрибута value.

Тег <button> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

Нет.

puzzleweb.ru

Вот альтернатива, если вы не уверены в использовании тега кнопки.

<form method="get" action="">  <input type="text" name="txt" />  <input type="hidden" name="myinput" value="myvalue" />  <input type="submit" name="submit" /> </form> 

Это будет более согласованным, чем тег кнопки, так как некоторые браузеры фактически отправляют текст внутри тегов кнопок, а не его атрибут value. Например

<button name="mybutton" type="submit" value="one">Two</button> 

В некоторых браузерах у вас будет «один», в других — «Два».

Если вы хотите действовать условно в зависимости от конкретной нажатой кнопки, вам нужно будет сделать это на основе текста на входе…

        

В этом примере текст на дисплее ( «Кнопка 1» или «Кнопка 2» ) будет отправлен назад.

Firefox: «? txt = & submit = Button + 1» IE: «? Txt = & submit = Button + 1» Safari: «? Txt = & submit = Button + 1»

И так далее. Предоставление двух элементов формы одно и то же имя обычно считается возможным, поскольку браузеры поддерживают его. Это формально не документировано, поэтому вам придется решить, хотите ли вы действовать на нем.

Как окончательная альтернатива, есть ли причина, по которой вы не можете дать им поле формы, которое позволяет им выбирать поток управления, а не иметь две кнопки?

<form method="get" action="">  <input type="text" name="txt" />  <select name="myname">  <option value="A">A</option>  <option value="B">B</option>  </select>  <input type="submit" name="submit" value="Go" /> </form> 

UPDATE

Если вам нужны две кнопки для случая, о которых вы упомянете в своем комментарии… т.е. одну кнопку на полпути вниз по форме, чтобы обновить что-то на основе подмножества входов и другую кнопку внизу, чтобы отправить, это как вы должны что-то делать…

1) Кнопки должны делать то же самое — просто отправьте форму.

2) Вы должны обнаружить серверную сторону, если у вас есть действительная форма (если они работают последовательно и попали в первый из двух отправлений, у вас будут пустые входы для второй половины формы, что делает ее недействительной).

3) Вы должны обнаружить серверную сторону, если у вас достаточно информации для выполнения вычисления или обновления, упомянутых в вашем комментарии.

В случаях 2 и 3 вы должны пометить поля, которые необходимы для продолжения пользователем.

Это отрицает необходимость того, чтобы определенные кнопки делали определенные вещи — пользователь мог вводить первую половину формы и все же нажимать кнопку внизу — так что вы не хотите, чтобы ваша логика была основана на кнопке.

qaru.site


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.