London |26-ITP-Sep | Rawan Almutairi | Sprint 1 | FormControls

Form-Controls/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>My form exercise</title>
+    <link rel="stylesheet" href="style.css"/>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
@@ -13,15 +14,66 @@ <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-        <!-- write your html here-->
-        <!-- 
-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
+  <!-- write your html here-->
+        Enter your name:
+      <input type="text" placeholder="Enter your name" name="aName" size="16" minlength="2" maxlength="16"required>
+
+<!-- the size attribute control how wide the text box, "how many characters it can control-->
+<!-- the minlength attribute control the minimum number of characters required-->
+<!-- the maxlength attribute control the maximum number of characters required-->
+<!-- the placeholder attribute provide a hint for the user on what to enter-->
+ <!-- the required attribute ensures the user fills out the field-->
+<p>Choose your T-shirt color:</p>
+<!-- choosing the radio buttons for color selection-->
+<p>please select a color:</p>
+<p>
+<input type="radio" name="color" id="red" value="Red" placeholder="Red" required>
+<label for="red"label>Red</label><br>
+<input type="radio" name="color" id="brown" value="Brown" placeholder="Brown" required>
+<label for="brown">Brown</label><br>
+<input type="radio" name="color" id="black" value="Black" placeholder="Black" required>
+<label for="black">Black</label><br>
+</p>
+
+<!-- a list of suggestions using the list attribute and the datalist element -->
+ <!-- I need to fix the labels to increase accessbility to 100%-->
+ <label> 
+Select your T-shirt size: 
+<input list="SizeList" name="T-shirt Size" placeholder=" Choose your size" required><br> 
+</label>
+<datalist id="SizeList">
+
+<option value="XS">
+  <option value="S">
+    <option value="M">
+      <option value="L">
+        <option value="XL">
+          <option value="XXL">
+
+</datalist>
+
       </form>
+
+<p>
+       <style>
+input:invalid{background: rgb(253, 251, 253);}
+input:valid{background: rgb(253, 251, 253);}
+ </style>
+ Enter your email:
+<input type="email" placeholder="Enter your email" required>
+</p>
+<!--The input type="email" is used so the browser can validatae the email address format-->
+<!--the style tag is used to style the input box. CSS pseudo-classes :valid or :invalid to check if the email is valid and notify the user-->
+
+<form> <label> <input type="submit"> <input type="resit">
+  </label>
+</form>
     </main>
     <footer>
       <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>Rawan@</p>
     </footer>
   </body>
-</html>
+</html> 
+
+<!--done-->

Form-Controls/style.css

@@ -0,0 +1,20 @@
+<!-- styling-->
+
+ body { color: #141414; 
+
+    background-color: #6aa57e; 
+
+     font-family: Georgia; 
+
+
+
+
+h1{
+
+font-family: sans-serif;
+color:  rgba(15, 15, 15, 0.267); 
+background-color: #f5eeda;  
+text-align: center;
+font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+
+}

Form-Controls/validate-pr-metadata

@@ -0,0 +1,19 @@
+name: Validate PR Metadata
+on:
+  pull_request_target:
+    types:
+      - labeled
+      - unlabeled
+      - opened
+      - edited
+      - reopened
+
+jobs:
+  validate_pr_metadata:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: CodeYourFuture/actions/validate-pr-metadata@main
+        with:
+          give_more_specific_comment_for_earlier_learners: true
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}