Enable Javascript for a better experience.
L O A D I N G . . .
Skip to main
Form Example - Credit Card
The source code of this page is available at
Form_Example_CreditCard.elm
.
**** **** **** ****
CARD HOLDER
FULL NAME
EXPIRES
MM/YY
Card Number
Card Holder
Expires
CVV
Submit
Overview
UI Components
Form
Form Entities
Form Boilerplate
Form Example - Table
Form Example - Credit Card
Form Example - Phone Selector
Input Field: Text
Input Field: Single
Input Field: Binary
Form States
Counter
Sortable Table
English
Japanese (日本語)
© Rakuten, Inc.
⬤
⬤
⬤
⬤
⬤
⬤
⬤
⬤
⋮
Overview
UI Components
Form
Form Entities
Form Boilerplate
Form Example - Table
Form Example - Credit Card
Form Example - Phone Selector
Input Field: Text
Input Field: Single
Input Field: Binary
Form States
Counter
Sortable Table
Language
English
Japanese (日本語)
' opacity='.9'%3E%3Crect width='87' height='64.6' x='3' y='3.1' fill='url(%23paint0_linear)' rx='9'/%3E%3Crect width='87' height='64.6' x='3' y='3.1' fill='url(%23paint1_linear)' rx='9'/%3E%3Crect width='85.5' height='63.1' x='3.8' y='3.9' stroke='url(%23paint2_radial)' stroke-width='1.5' rx='8.3'/%3E%3C/g%3E%3Cg opacity='.8'%3E%3Cg filter='url(%23filter1_d)'%3E%3Cpath fill='%23000' fill-opacity='.8' d='M58.5 24.2H90v1.5H58.5z'/%3E%3C/g%3E%3Cg filter='url(%23filter2_d)'%3E%3Cpath fill='%23000' fill-opacity='.8' d='M58.5 45.2H90v1.5H58.5z'/%3E%3C/g%3E%3Cg filter='url(%23filter3_d)'%3E%3Cpath fill='%23000' fill-opacity='.8' d='M3 24.2h31.5v1.5H3z'/%3E%3C/g%3E%3Cg filter='url(%23filter4_d)'%3E%3Cpath fill='%23000' fill-opacity='.8' d='M3 45.2h31.5v1.5H3z'/%3E%3C/g%3E%3Cg filter='url(%23filter5_d)'%3E%3Cpath stroke='%23000' stroke-opacity='.8' stroke-width='1.5' d='M35 47.9c2 9 6.3 15.3 11.5 15.3s9.6-6.4 11.5-15.5c.6-2.8-1.9-9-1.9-12.3 0-3.2 2.5-9.3 1.9-12.1C56.2 14 51.7 7.6 46.5 7.6S36.9 14 35 23.1C34.5 26 37 32 37 35.4c0 3.4-2.4 9.6-1.8 12.5z' clip-rule='evenodd'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_dd' width='93' height='70.6' x='0' y='.1' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dy='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3CfeBlend in2='effect1_dropShadow' result='effect2_dropShadow'/%3E%3CfeBlend in='SourceGraphic' in2='effect2_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' width='31.5' height='3.5' x='58.5' y='24.2' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dy='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter2_d' width='31.5' height='3.5' x='58.5' y='45.2' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dy='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter3_d' width='31.5' height='3.5' x='3' y='24.2' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dy='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter4_d' width='31.5' height='3.5' x='3' y='45.2' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dy='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter5_d' width='24.6' height='59.1' x='34.2' y='6.9' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dy='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear' x1='15.4' x2='-1' y1='-7.4' y2='60.1' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFEA9E'/%3E%3Cstop offset='.5' stop-color='%23C19D39'/%3E%3Cstop offset='.6' stop-color='%23D09B21'/%3E%3Cstop offset='1' stop-color='%23ECCF6B'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear' x1='19.5' x2='4.9' y1='-6.3' y2='60.6' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFECC8'/%3E%3Cstop offset='1' stop-color='%23D0B978'/%3E%3C/linearGradient%3E%3CradialGradient id='paint2_radial' cx='0' cy='0' r='1' gradientTransform='matrix(-50.6658 53.89513 -33.28775 -31.2932 65 18.2)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23fff'/%3E%3Cstop stop-color='%23fff'/%3E%3Cstop stop-color='%23fff' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E)
)' viewBox='0 0 1050 374'%3E%3Cpath fill='%23fff' d='M433 320h-80L402 6h84zM727 13c-16-6-41-13-73-13-80 0-136 43-136 104-1 45 40 70 71 85s42 25 42 39c-1 21-26 30-49 30-32 0-50-5-76-16l-11-5-11 70c19 9 54 16 90 17 85 0 141-42 141-107 1-36-21-63-68-86-28-14-45-24-45-38s14-27 46-27c27-1 46 5 61 12l7 3 11-68zM835 208l32-88 11-30 5 27 19 91h-67zM935 6h-63c-19 0-34 5-42 26L709 319h85l17-47h104l10 47h75L935 6zM285 6l-80 213-8-43C182 126 136 72 85 45l72 274h86L370 6h-85z'/%3E%3Cpath fill='%23fff' d='M132 6H1l-1 6c102 26 169 89 197 164L168 32c-4-20-19-26-36-26z'/%3E%3C/svg%3E)