Final answer:
To create the credit card form with required fields and validation patterns, you can use HTML code examples. Additionally, style rules can be added to a CSS file to achieve the desired appearance.
Step-by-step explanation:
To create the credit card selection list and cardname field, you can use the HTML code below:
<select name="credit_card_type" required>
<option value="">Credit Card Type</option>
<option value="amex">American Express</option>
<option value="disc">Discover</option>
<option value="master">MasterCard</option>
<option value="visa">Visa</option>
</select>
<input type="text" name="cardname" required>
To make the cardnumber field required and add a regular expression pattern, you can use the following HTML code:
<input type="text" name="cardnumber" required pattern="^\d{15,16}$">
To create the cardmonth selection list, you can use this HTML code:
<select name="cardmonth" required>
<option value="">Month</option>
<option value="01">January (01)</option>
<option value="02">February (02)</option>
<option value="03">March (03)</option>
<!-- Add options for all months -->
</select>
To create the cardyear selection list, you can use this HTML code:
<select name="cardyear" required>
<option value="">Year</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<!-- Add options for all years -->
</select>
To make the cardcsc field required with a maximum character length of 3 characters and a regular expression pattern, you can use this HTML code:
<input type="text" name="cardcsc" required maxlength="3" pattern="^\d{3}$">
In the code7-3_valid.css file, you can add the following style rules to achieve the desired appearance:
input:focus, select:focus {
background-color: yellow;
}
input:invalid {
color: red;
border: 1px solid red;
box-shadow: 0 0 5px red;
}