In: Computer Science
I am confused about how the pattern and how to get only some letters that are needed and numbers?
New Perspectives HMTL5, CSS3, and JavaScript Chapter 13 Case Problem 2
HTML Document
Scroll down to the empInfo table and add pattern attributes to the following fields using regular expressions (Note: Regular expressions in the HTML pattern attribute do not include the opening and closing / character):
Take some time to study the class names for the input elements in the travelExp table. This table will be used to calculate the total travel expenses for each day and across all categories.
Note that input elements that contribute to the total are placed in the sum class. Inputelements belonging to a common date are placed in the date0 through date5 classes. Finally, input elements belonging to different expense categories are placed in the trans, lodge, meal, and other classes.
<!DOCTYPE html>
<html lang="en">
<head>
<!--
New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
Tutorial 13
Case Problem 2
Travel Expense Report
Author:
Date:
Filename: dl_expenses.html
-->
<title>DeLong Enterprises Expense Report</title>
<meta charset="utf-8" />
<link href="dl_base.css" rel="stylesheet" />
<link href="dl_layout.css" rel="stylesheet" />
<script src="dl_expenses.js" async></script>
</head>
<body>
<header>
<nav class="horizontal">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Policies</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Employment</a></li>
<li><a href="#">Financial</a></li>
<li><a href="#">Insurance</a></li>
<li><a href="#">Accounts</a></li>
</ul>
</nav>
<img src="dl_logo.png" alt="DeLong Enterprises" id="logoImg" />
</header>
<section>
<form name="expReport" id="expReport" method="post" action="dl_valid.html">
<table id="travelSummary">
<tr>
<th>Trip Summary<span>*</span></th>
</tr>
<tr>
<td>
<textarea id="summary" name="summary" required></textarea>
</td>
</tr>
</table>
<aside>
<h1>Expense Report</h1>
<p>Form: 2CEXP15<br />
* --- Required Field
</p>
<p>Send Report To:<br />
Debbie Larson<br />
Personnel Dept.<br />
Rm. 3801<br />
Ext. 1250
</p>
</aside>
<table id="empInfo">
<tr>
<th>Last Name<span>*</span></th>
<th>First Name<span>*</span></th>
<th>M.I.</th>
<th>Account<span>*</span></th>
<td><input type="text" name="accID" id="accID" pattern="\d{6}$" placeholder="ACTnnnnnn" required /></td>
</tr>
<tr>
<td><input type="text" name="lname" id="lname" required /></td>
<td><input type="text" name="fname" id="fname" required /></td>
<td><input type="text" name="init" id="init" required /></td>
<th>Department<span>*</span></th>
<td><input type="text" name="deptID" id="deptID" required placeholder="DEPTnnnnnn" /></td>
</tr>
<tr>
<th>Social Security Number<span>*</span></th>
<td colspan="2"><input type="text" name="ssn" id="ssn" required placeholder="nnn-nn-nnnn" /></td>
<th>Project<span>*</span></th>
<td><input type="text" name="projID" id="projID"
ANSWER:
CODE TEXT
<!DOCTYPE html>
<html lang="en">
<head>
<!--
New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
Tutorial 13
Case Problem 2
Travel Expense Report
Author:
Date:
Filename: dl_expenses.html
-->
<title>DeLong Enterprises Expense Report</title>
<meta charset="utf-8" />
<link href="dl_base.css" rel="stylesheet" />
<link href="dl_layout.css" rel="stylesheet" />
<script src="dl_expenses.js" async></script>
</head>
<body>
<header>
<nav class="horizontal">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Policies</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Employment</a></li>
<li><a href="#">Financial</a></li>
<li><a href="#">Insurance</a></li>
<li><a href="#">Accounts</a></li>
</ul>
</nav>
<img src="dl_logo.png" id="logoImg"
/>
</header>
<section>
<form name="expReport" id="expReport" method="post"
action="dl_valid.html">
<table id="travelSummary">
<tr>
<th>Trip Summary<span>*</span></th>
</tr>
<tr>
<td>
<textarea id="summary" name="summary"
required></textarea>
</td>
</tr>
</table>
<aside>
<h1>Expense Report</h1>
<p>Form: 2CEXP15<br />
* --- Required Field
</p>
<p>Send Report To:<br />
Debbie Larson<br />
Personnel Dept.<br />
Rm. 3801<br />
Ext. 1250
</p>
</aside>
<table id="empInfo">
<tr>
<th>Last Name<span>*</span></th>
<th>First Name<span>*</span></th>
<th>M.I.</th>
<th>Account<span>*</span></th>
<!-- Pattern for ACT ID -->
<td><input type="text" name="accID" id="accID"
pattern="ACT[\d]{6}" placeholder="ACTnnnnnn" required
/></td>
</tr>
<tr>
<td><input type="text" name="lname" id="lname" required
/></td>
<td><input type="text" name="fname" id="fname" required
/></td>
<td><input type="text" name="init" id="init" required
/></td>
<th>Department<span>*</span></th>
<!-- Pattern for DEPT ID -->
<td><input type="text" name="deptID" id="deptID"
pattern="DEPT[\d]{4,6}" required placeholder="DEPTnnnnnn"
/></td>
</tr>
<tr>
<th>Social Security
Number<span>*</span></th>
<!-- Pattern for ssn sec -->
<td colspan="2"><input type="text" name="ssn" id="ssn"
pattern="[\d]{3}-[\d]{2}-[\d]{4}" required
placeholder="nnn-nn-nnnn" /></td>
<th>Project<span>*</span></th>
<!-- Pattern for PROJ ID -->
<td><input type="text" name="projID"
pattern="PROJ-[a-z]{2}-[\d]{3}" id="projID"></td>
</tr>
</table>
<input type="submit">
</form>
</section>
</body>
</html>
CODE IMAGE
OUTPUT IMAGE