Css input submit no text

CSS Forms

The look of an HTML form can be greatly improved with CSS:

Styling Input Fields

Use the width property to determine the width of the input field:

Example

The example above applies to all elements. If you only want to style a specific input type, you can use attribute selectors:

• input[type=text] — will only select text fields
• input[type=password] — will only select password fields
• input[type=number] — will only select number fields
• etc..

Padded Inputs

Use the padding property to add space inside the text field.

Tip: When you have many inputs after each other, you might also want to add some margin , to add more space outside of them:

Example

Note that we have set the box-sizing property to border-box . This makes sure that the padding and eventually borders are included in the total width and height of the elements.
Read more about the box-sizing property in our CSS Box Sizing chapter.

Bordered Inputs

Use the border property to change the border size and color, and use the border-radius property to add rounded corners:

Example

If you only want a bottom border, use the border-bottom property:

Example

Colored Inputs

Use the background-color property to add a background color to the input, and the color property to change the text color:

Example

Focused Inputs

By default, some browsers will add a blue outline around the input when it gets focus (clicked on). You can remove this behavior by adding outline: none; to the input.

Use the :focus selector to do something with the input field when it gets focus:

Example

Example

Input with icon/image

If you want an icon inside the input, use the background-image property and position it with the background-position property. Also notice that we add a large left padding to reserve the space of the icon:

Example

input[type=text] <
background-color: white;
background-image: url(‘searchicon.png’);
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
>

Animated Search Input

In this example we use the CSS transition property to animate the width of the search input when it gets focus. You will learn more about the transition property later, in our CSS Transitions chapter.

Example

input[type=text] <
transition: width 0.4s ease-in-out;
>

input[type=text]:focus width: 100%;
>

Styling Textareas

Tip: Use the resize property to prevent textareas from being resized (disable the «grabber» in the bottom right corner):

Example

textarea <
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
>

Styling Select Menus

Example

select <
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
>

Styling Input Buttons

Example

input[type=button], input[type=submit], input[type=reset] <
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
>

/* Tip: use width: 100% for full-width buttons */

For more information about how to style buttons with CSS, read our CSS Buttons Tutorial.

Responsive Form

Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.

Advanced: The following example uses media queries to create a responsive form. You will learn more about this in a later chapter.

Aligned Form

An example of how to style labels together with inputs to create a horizontal aligned form:

Источник

Css input submit no text

elements of type submit are rendered as buttons. When the click event occurs (typically because the user clicked the button), the user agent attempts to submit the form to the server.

Value

An element’s value attribute contains a string which is displayed as the button’s label. Buttons do not have a true value otherwise.

Setting the value attribute

input type="submit" value="Send Request" /> 

Omitting the value attribute

If you don’t specify a value , the button will have a default label, chosen by the user agent. This label is likely to be something along the lines of «Submit» or «Submit Query.» Here’s an example of a submit button with a default label in your browser:

Additional attributes

formaction

A string indicating the URL to which to submit the data. This takes precedence over the action attribute on the element that owns the .

This attribute is also available on and elements.

formenctype

A string that identifies the encoding method to use when submitting the form data to the server. There are three permitted values:

This, the default value, sends the form data as a string after URL encoding the text using an algorithm such as encodeURI() .

Uses the FormData API to manage the data, allowing for files to be submitted to the server. You must use this encoding type if your form includes any elements of type file ( ).

Plain text; mostly useful only for debugging, so you can easily see the data that’s to be submitted.

If specified, the value of the formenctype attribute overrides the owning form’s action attribute.

This attribute is also available on and elements.

formmethod

A string indicating the HTTP method to use when submitting the form’s data; this value overrides any method attribute given on the owning form. Permitted values are:

A URL is constructed by starting with the URL given by the formaction or action attribute, appending a question mark («?») character, then appending the form’s data, encoded as described by formenctype or the form’s enctype attribute. This URL is then sent to the server using an HTTP get request. This method works well for simple forms that contain only ASCII characters and have no side effects. This is the default value.

The form’s data is included in the body of the request that is sent to the URL given by the formaction or action attribute using an HTTP post method. This method supports complex data and file attachments.

This method is used to indicate that the button closes the dialog with which the input is associated, and does not transmit the form data at all.

This attribute is also available on and elements.

formnovalidate

A Boolean attribute which, if present, specifies that the form should not be validated before submission to the server. This overrides the value of the novalidate attribute on the element’s owning form.

This attribute is also available on and elements.

formtarget

A string which specifies a name or keyword that indicates where to display the response received after submitting the form. The string must be the name of a browsing context (that is, a tab, window, or ). A value specified here overrides any target given by the target attribute on the that owns this input.

In addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used:

Loads the response into the same browsing context as the one that contains the form. This will replace the current document with the received data. This is the default value used if none is specified.

Loads the response into a new, unnamed, browsing context. This is typically a new tab in the same window as the current document, but may differ depending on the configuration of the user agent.

Loads the response into the parent browsing context of the current one. If there is no parent context, this behaves the same as _self .

Loads the response into the top-level browsing context; this is the browsing context that is the topmost ancestor of the current context. If the current context is the topmost context, this behaves the same as _self .

This attribute is also available on and elements.

Using submit buttons

buttons are used to submit forms. If you want to create a custom button and then customize the behavior using JavaScript, you need to use , or better still, a element.

A simple submit button

We’ll begin by creating a form with a simple submit button:

form> div> label for="example">Let's submit some textlabel> input id="example" type="text" name="text" /> div> div> input type="submit" value="Send" /> div> form> 

Try entering some text into the text field, and then submitting the form.

Upon submitting, the data name/value pair gets sent to the server. In this instance, the string will be text=usertext , where «usertext» is the text entered by the user, encoded to preserve special characters. Where and how the data is submitted depends on the configuration of the ; see Sending form data for more details.

Adding a keyboard shortcut to a submit button

Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a submit button — just as you would with any for which it makes sense — you use the accesskey global attribute.

In this example, s is specified as the access key (you’ll need to press s plus the particular modifier keys for your browser/OS combination). In order to avoid conflicts with the user agent’s own keyboard shortcuts, different modifier keys are used for access keys than for other shortcuts on the host computer. See accesskey for further details.

Here’s the previous example with the s access key added:

form> div> label for="example">Let's submit some textlabel> input id="example" type="text" name="text" /> div> div> input type="submit" value="Send" accesskey="s" /> div> form> 

For example, in Firefox for Mac, pressing Control — Option — S triggers the Send button, while Chrome on Windows uses Alt + S .

The problem with the above example is that the user will not know what the access key is! This is especially true since the modifiers are typically non-standard to avoid conflicts. When building a site, be sure to provide this information in a way that doesn’t interfere with the site design (for example by providing an easily accessible link that points to information on what the site access keys are). Adding a tooltip to the button (using the title attribute) can also help, although it’s not a complete solution for accessibility purposes.

Disabling and enabling a submit button

To disable a submit button, specify the disabled attribute on it, like so:

input type="submit" value="Send" disabled /> 

You can enable and disable buttons at run time by setting disabled to true or false ; in JavaScript this looks like btn.disabled = true or btn.disabled = false .

Validation

Submit buttons don’t participate in constraint validation; they have no real value to be constrained.

Examples

We’ve included simple examples above. There isn’t really anything more to say about submit buttons. There’s a reason this kind of control is sometimes called a «simple button.»

Technical Summary

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 12, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Значение submit

Тип submit (от англ. «submit» ‒ «отправить») создаёт кнопку отправки данных формы. При активации данной кнопки происходит отправка всех данных формы на сервер.

Внешний вид

• ‒ кнопка отправки;
• ‒ фокус;
• ‒ наведение курсора;
• ‒ активация.

Примечание

• В форму может быть включено несколько кнопок отправки;
• Если кнопке отправки указать атрибут « name », то тогда она будет содержать пару « имя=значение », которая включается в отправляемые данные.

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

Спецификация

Верс.	Раздел
HTML
2.0	Submit Button: INPUT TYPE=SUBMIT	Перевод
3.2	INPUT text fields, radio buttons, check boxes, .
4.01	17.4.1 Control types created with INPUT submit buttons. DTD: Transitional Strict Frameset
5.0	4.10.5.1.15 Submit Button state (type=submit)
5.1	4.10.5.1.18. Submit Button state (type=submit)
XHTML
1.0	Extensible HyperText Markup Language DTD: Transitional Strict Frameset
1.1	Extensible HyperText Markup Language

Сопутствующие атрибуты

autofocus Автоматческая фокусировка на кнопке после полной загрузки страницы. disabled Блокировка кнопки отправки.

disabled=»disabled»

form Присоединение кнопки отправки к форме. formaction Задаёт URL-адреса обработчика формы. formenctype Устанавливает способ кодирования данных отправляемых на сервер. formmethod Определяет HTTP-метод передачи данных на сервер. formnovalidate Отменяет проверку данных формы перед отправкой на сервер. formtarget Указывает фрейм или окно в которое будет загружен ответ с сервера. name Присваивает имя кнопке отправки. (Создаёт пару « имя=значение ».) value Указывает текст кнопки отправки.

value=»Текст»

Источник