mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
94 lines
3.5 KiB
Plaintext
94 lines
3.5 KiB
Plaintext
---
|
|
import FormText from '@ui/FormText.astro'
|
|
import CardSubtitle from '@ui/CardSubtitle.astro'
|
|
import Button from '@ui/Button.astro'
|
|
import ButtonList from '@ui/ButtonList.astro'
|
|
import CardTitle from '@ui/CardTitle.astro'
|
|
import FormGroup from '@ui/FormGroup.astro'
|
|
---
|
|
|
|
<form class="card">
|
|
<div class="card-body">
|
|
<CardTitle>Payment Method</CardTitle>
|
|
<CardSubtitle class="mb-4">All transactions are secure and encrypted</CardSubtitle>
|
|
|
|
<FormGroup label="Name on Card" for="payment-form-name">
|
|
<input type="text" id="payment-form-name" class="form-control" placeholder="John Doe" autocomplete="cc-name" />
|
|
</FormGroup>
|
|
|
|
<div class="row">
|
|
<div class="col-8">
|
|
<FormGroup label="Card Number" for="payment-form-number">
|
|
<input type="text" id="payment-form-number" class="form-control" placeholder="1234 5678 9012 3456" autocomplete="cc-number" aria-describedby="payment-form-number-hint" />
|
|
<FormText id="payment-form-number-hint">Enter your 16-digit number.</FormText>
|
|
</FormGroup>
|
|
</div>
|
|
<div class="col-4">
|
|
<FormGroup label="CVV" for="payment-form-cvv">
|
|
<input type="text" id="payment-form-cvv" class="form-control" placeholder="123" autocomplete="cc-csc" />
|
|
</FormGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<FormGroup label="Month" for="payment-form-exp-month">
|
|
<select id="payment-form-exp-month" class="form-select" autocomplete="cc-exp-month">
|
|
<option value="">MM</option>
|
|
<option value="1">January</option>
|
|
<option value="2">February</option>
|
|
<option value="3">March</option>
|
|
<option value="4">April</option>
|
|
<option value="5">May</option>
|
|
<option value="6">June</option>
|
|
<option value="7">July</option>
|
|
<option value="8">August</option>
|
|
<option value="9">September</option>
|
|
<option value="10">October</option>
|
|
<option value="11">November</option>
|
|
<option value="12">December</option>
|
|
</select>
|
|
</FormGroup>
|
|
</div>
|
|
<div class="col-6">
|
|
<FormGroup label="Year" for="payment-form-exp-year">
|
|
<select id="payment-form-exp-year" class="form-select" autocomplete="cc-exp-year">
|
|
<option value="">YYYY</option>
|
|
<option value="2025">2025</option>
|
|
<option value="2026">2026</option>
|
|
<option value="2027">2027</option>
|
|
<option value="2028">2028</option>
|
|
<option value="2029">2029</option>
|
|
<option value="2030">2030</option>
|
|
</select>
|
|
</FormGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4" />
|
|
|
|
<CardTitle>Billing Address</CardTitle>
|
|
<CardSubtitle class="mb-4">The billing address associated with your payment method</CardSubtitle>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-check">
|
|
<input class="form-check-input" type="checkbox" checked />
|
|
<span class="form-check-label">Same as shipping address</span>
|
|
</label>
|
|
</div>
|
|
|
|
<hr class="my-4" />
|
|
|
|
<FormGroup label="Comments" for="payment-form-comments">
|
|
<textarea id="payment-form-comments" class="form-control" rows="3" placeholder="Add any additional comments"></textarea>
|
|
</FormGroup>
|
|
|
|
<div class="mt-4">
|
|
<ButtonList>
|
|
<Button type="submit" text="Submit" color="primary" />
|
|
<Button text="Cancel" />
|
|
</ButtonList>
|
|
</div>
|
|
</div>
|
|
</form>
|