Question

Within the creditcard selection list add the following options and values: Credit Card Type (leave the value as an empty text string), American Express (value="amex"), Discover (value="disc"), MasterCard (value="master"), and Visa (value="visa").

Make the selection list and cardname field required.


Make the cardnumber field required and add the regular expression pattern indicated in the comment section of the HTML file to help ensure that a valid card number is used.


Within the cardmonth selection list add options for each month starting with the text Month and a value of a blank text string followed by the option text January (01) through December (12) with the corresponding values 01 through 12. Make the selection list required.


Within the cardyear selection list add options for each year starting with the text Year and a value of a blank text string followed by the option text 2020 through 2024 with the corresponding values 2020 through 2024.


Make the cardcsc field required with a maximum character length of 3 characters following the regular expression pattern: ^\d{3}$ .


Open the code7-3_valid.css file and add the following style rules to the file:

Display any input or select element that has the focus with a yellow background color.
Display any input element with invalid data in a red font, surrounded by a red border, and red box shadows that are offset 0 pixels horizontally and vertically with a shadow blur of 5 pixels.

Answer 1

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;
}

Answer 2

input:focus {

background-color: yellow;

}

input:invalid {

color: red;

border: 1px solid red;

box-shadow: 0 0 5px red;

}