codecademydev/index.html Secret

## index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Html CSS Cheatsheet</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <header>
    <h1>HTML Form Cheatsheet</h1>
    <h2>Form Tags</h2>
  </header>
  <main>
    <table class="table-1">
      <thead>
        <td>Name</td>
        <td>Tag</td>
        <td>Description</td>
      </thead>
      <tbody>
        <tr>
          <td class="code">
            &lt;input&gt;
          </td>
          <td>
            Input
          </td>
          <td>
            is used to render a variety of input fields on a webpage including text fields, checkboxes, buttons, etc.
          </td>
        </tr>
        <tr>
          <td class="code">&lt;label&gt;</td>
          <td>Label</td>
          <td>Provides specific information to the relative input with the same value</td>
        </tr>
        <tr>
          <td class="code">&lt;select&gt;</td>
          <td>Select</td>
          <td>can be used to create a dropdown list.</td>
        </tr>
        <tr>
          <td class="code">&lt;datalist&gt;</td>
          <td>Datalist</td>
          <td>a basic search/autocomplete functionality</td>
        </tr>
        <tr>
          <td class="code">&lt;textarea&gt;</td>
          <td>Textarea</td>
          <td>used when creating a
            text-box for multi-line input (e.g. a comment section)</td>
        </tr>
      </tbody>
    </table>
    <br>
    <h2>Form Attributes</h2>
    <table class="table-2">
      <thead>
        <td>Tag</td>
        <td>Name</td>
        <td>Description</td>
      </thead>
      <tbody>
        <tr>
          <td class="code">type="text"</td>
          <td>Text Type</td>
          <td>This renders a single row input field that users can type text inside</td>
        </tr>
        <tr>
          <td class="code">type="password"</td>
          <td>Password Type</td>
          <td>This renders a single row input field which allows the user to type censored text inside the field. It is used to type in sensitive information</td>
        </tr>
        <tr>
          <td class="code">type"number"</td>
          <td>Number Type</td>
          <td>allow the user to enter only numbers and a few special characters inside the field</td>
        </tr>
        <tr>
          <td class="code">type="range"</td>
          <td>Range Type</td>
          <td>This will create a range slider. The range slider will act as a selector between a minimum and a maximum value</td>
        </tr>
        <tr>
          <td class="code">type="checkbox"</td>
          <td>Checkbox</td>
          <td>This will render a single checkbox item. To create a group of checkboxes
            related to the same topic, they should all use the same name attribute. Since it’s a checkbox, multiple
            checkboxes can be selected for the same topic</td>
        </tr>
        <tr>
          <td class="code">type="radio"</td>
          <td>Radio</td>
          <td>This attribute that renders a single radio button. Multiple radio buttons of a related topic
            are given the same name attribute value</td>
        </tr>
        <tr>
          <td class="code">name=""</td>
          <td>Name</td>
          <td>In order for a form to send data, it needs to be able to
            put it into key-value pairs. This is achieved by setting the attribute of the element</td>
        </tr>
        <tr></tr>
      </tbody>
    </table>
    <br>
  </main>
</body>

</html>

## styles.css
body {
  background-color: bisque;
  font-family: Helvetica;
}

h1 {
  font-size: 48px;
  font-family: sans-serif;
  font-weight: bold;
  color: black;
  text-align: center;

}

h2 {
  color: blue;
  text-align: center;
}

.table-1 {
  border-style: double;
  margin-left: auto;
  margin-right: auto;


}

thead {
  text-transform: uppercase;
  background-color: aquamarine;


}

td {
  border: 1px solid;
  border-color: black;

}

.table-2 {
  border-style: double;
  margin-left: auto;
  margin-right: auto;
}

.code {
  font-family: monospace;
  background-color: aliceblue;
}
	<!DOCTYPE html>
	<html lang="en" dir="ltr">

	<head>
	<meta charset="utf-8">
	<title>Html CSS Cheatsheet</title>
	<link rel="stylesheet" href="styles.css">
	</head>

	<body>
	<header>
	<h1>HTML Form Cheatsheet</h1>
	<h2>Form Tags</h2>
	</header>
	<main>
	<table class="table-1">
	<thead>
	<td>Name</td>
	<td>Tag</td>
	<td>Description</td>
	</thead>
	<tbody>
	<tr>
	<td class="code">
	<input>
	</td>
	<td>
	Input
	</td>
	<td>
	is used to render a variety of input fields on a webpage including text fields, checkboxes, buttons, etc.
	</td>
	</tr>
	<tr>
	<td class="code"><label></td>
	<td>Label</td>
	<td>Provides specific information to the relative input with the same value</td>
	</tr>
	<tr>
	<td class="code"><select></td>
	<td>Select</td>
	<td>can be used to create a dropdown list.</td>
	</tr>
	<tr>
	<td class="code"><datalist></td>
	<td>Datalist</td>
	<td>a basic search/autocomplete functionality</td>
	</tr>
	<tr>
	<td class="code"><textarea></td>
	<td>Textarea</td>
	<td>used when creating a
	text-box for multi-line input (e.g. a comment section)</td>
	</tr>
	</tbody>
	</table>
	<br>
	<h2>Form Attributes</h2>
	<table class="table-2">
	<thead>
	<td>Tag</td>
	<td>Name</td>
	<td>Description</td>
	</thead>
	<tbody>
	<tr>
	<td class="code">type="text"</td>
	<td>Text Type</td>
	<td>This renders a single row input field that users can type text inside</td>
	</tr>
	<tr>
	<td class="code">type="password"</td>
	<td>Password Type</td>
	<td>This renders a single row input field which allows the user to type censored text inside the field. It is used to type in sensitive information</td>
	</tr>
	<tr>
	<td class="code">type"number"</td>
	<td>Number Type</td>
	<td>allow the user to enter only numbers and a few special characters inside the field</td>
	</tr>
	<tr>
	<td class="code">type="range"</td>
	<td>Range Type</td>
	<td>This will create a range slider. The range slider will act as a selector between a minimum and a maximum value</td>
	</tr>
	<tr>
	<td class="code">type="checkbox"</td>
	<td>Checkbox</td>
	<td>This will render a single checkbox item. To create a group of checkboxes
	related to the same topic, they should all use the same name attribute. Since it’s a checkbox, multiple
	checkboxes can be selected for the same topic</td>
	</tr>
	<tr>
	<td class="code">type="radio"</td>
	<td>Radio</td>
	<td>This attribute that renders a single radio button. Multiple radio buttons of a related topic
	are given the same name attribute value</td>
	</tr>
	<tr>
	<td class="code">name=""</td>
	<td>Name</td>
	<td>In order for a form to send data, it needs to be able to
	put it into key-value pairs. This is achieved by setting the attribute of the element</td>
	</tr>
	<tr></tr>
	</tbody>
	</table>
	<br>
	</main>
	</body>

	</html>
	body {
	background-color: bisque;
	font-family: Helvetica;
	}

	h1 {
	font-size: 48px;
	font-family: sans-serif;
	font-weight: bold;
	color: black;
	text-align: center;

	}

	h2 {
	color: blue;
	text-align: center;
	}

	.table-1 {
	border-style: double;
	margin-left: auto;
	margin-right: auto;


	}

	thead {
	text-transform: uppercase;
	background-color: aquamarine;


	}

	td {
	border: 1px solid;
	border-color: black;

	}

	.table-2 {
	border-style: double;
	margin-left: auto;
	margin-right: auto;
	}

	.code {
	font-family: monospace;
	background-color: aliceblue;
	}