VisualWikitext
No edit summary
m (Text replacement - "{{Doc properties" to "{{Csp class properties")
 
(18 intermediate revisions by 4 users not shown)
Line 4: Line 4:
_input
_input
===Synopsis===
===Synopsis===
A graphiocal submit button
A graphical submit button
===Description===
===Description===
_input elements of type image are used to create graphical submit buttons, i.e. submit buttons that take the form of an image rather than text.
_input elements of type image are used to create graphical submit buttons, i.e. submit buttons that take the form of an image rather than text.
===Parameters===
===Parameters===
type="month"
type="image"


All other valid parameters for an input field are valid. Additionally you can use min, max, step and list.  
All other valid parameters for an input field are valid. Additionally you can use min, max, step and list.  
===Example===
===Example===
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
<p>Sign in to your account:</p>
<_fieldset style="border:1px solid #eee; padding:15px;">
<div>
  <_legend>Sign in</_legend>
  <_label for="userId">User ID</_label>
  <p>Sign in to your account:</p>
  <_input type="text" id="userId" name="userId" />
  <div>
</div>
    <_label for="userId">User ID</_label>
<_input type="image" id="image" alt="Login"
    <_input type="text" id="userId" name="userId" />
   src="{{filepath:File:Login-btn-example.png}}" />
  </div>
  <_input type="image" id="image" alt="Login"
   src="//{{filepath:Login-btn-example.png|nowiki}}" />
</_fieldset>
</syntaxhighlight>
</syntaxhighlight>
<_fieldset style="border:1px solid #eee; padding:15px;">
<_legend>Sign in</_legend>
<p>Sign in to your account:</p>
<p>Sign in to your account:</p>
<div>
<div>
Line 27: Line 32:
</div>
</div>
<_input type="image" id="image" alt="Login"
<_input type="image" id="image" alt="Login"
   src="{{filepath:Login-btn-example.png}}" />
   src="{{filepath:Login-btn-example.png|nowiki}}" />
  </_fieldset>
===Note===
===Note===
When not a correct month is entered, the browser will fallback to a text-input field. Read the link below how to handle these situations.
Also note that not all browsers support the month attribute.
===Links===
===Links===
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image
ws-class-props
Line 1: Line 1:
 
{{Csp class properties
|Doc subject=DevOps:Doc/FlexForm
|Subject version=1.0,1.1
|Doc parent=DevOps:Doc/FlexForm/1.0/input
|Doc sort order=110
|Doc target group=User
|Doc synopsis=A graphical submit button
}}
ws-page-props
Line 1: Line 1:
{{Doc properties
 
|Doc subject=DevOps:Doc/FlexForm
|Doc parent=DevOps:Doc/FlexForm/1.0.0/input
|Doc sort order=110
|Doc target group=User
|Subject version=1.0.0
}}

Latest revision as of 09:59, 15 July 2025

Name

image

Type

_input

Synopsis

A graphical submit button

Description

_input elements of type image are used to create graphical submit buttons, i.e. submit buttons that take the form of an image rather than text.

Parameters

type="image"

All other valid parameters for an input field are valid. Additionally you can use min, max, step and list.

Example

<_fieldset style="border:1px solid #eee; padding:15px;">
  <_legend>Sign in</_legend>
  <p>Sign in to your account:</p>
  <div>
    <_label for="userId">User ID</_label>
    <_input type="text" id="userId" name="userId" />
  </div>
  <_input type="image" id="image" alt="Login"
  src="//{{filepath:Login-btn-example.png|nowiki}}" />
 </_fieldset>

Sign in

Sign in to your account:

Note

Links

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image

Retrieved from "https://open-csp.org/index.php?title=DevOps:Doc/FlexForm/1.0/input/image&oldid=3608"