codecademydev/index.html Secret

## index.html
<html>
    <head>
        <title>My Cheetsheet</title>
        <link href= "./styles.css" type="text/css" rel="stylesheet">
    </head>

    <body>
        <h1 class= "tabletitle">HTML Forms</h1>
        <table>
            <thead>
                <tr class = "heading">
                    <th>Input Type</th>
                    <th>Description</td>
                    <th>Usual Attributes</th>
                </tr>
            </thead>

            <tbody class= "body">
                <tr>
                    <td>text</td>
                    <td>renders a text field where user can type into </td>
                    <td> id, name</td>
                </tr>
                <tr>
                    <td>number</td>
                    <td>restrict what users can type into the input field to just numbers </td>
                    <td>id, name, step </td>
                </tr>
                <tr>
                    <td>password</td>
                    <td>will replace input text with another character like an asterisk or a dot </td>
                    <td>id, name </td>
                </tr>
                <tr>
                    <td>range</td>
                    <td>limit the values the users can type into </td>
                    <td>id, name, min, max, step </td>
                </tr>
                <tr>
                    <td>checkbox</td>
                    <td>allow users to select multiple options </td>
                    <td>id, name, value </td>
                </tr>
                <tr>
                    <td>radio</td>
                    <td>allow users to select single option </td>
                    <td>id, name, value </td>
                </tr>
                <tr>
                    <td>dropdown list (select/option)*</td>
                    <td>provides the user a dropdown list  </td>
                    <td>id, name, value </td>
                </tr>
                <tr>
                    <td>datalist (datalilst/option)*</td>
                    <td>provides the user a dropdown list where they can type into </td>
                    <td>list, id, name, value </td>
                </tr>
                <tr>
                    <td>textarea*</td>
                    <td>textarea element is used to create a bigger text field for users to write more text </td>
                    <td>id, name, rows, cols </td>
                </tr>
                <tr>
                    <td>submit</td>
                    <td>Submits the form </td>
                    <td>value </td>
                </tr>
            </tbody>
        </table>
        <br>
        <br>

        <h1 class="tabletitle">Form Attibutes</h1>
        <table>
            <thead>
                <tr class = "heading">
                    <th>Attribute</th>
                    <th>Description</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>id</td>
                    <td>connects the form to the label form </td>
                </tr>
                <tr>
                    <td>name</td>
                    <td>sent along with value when form is submitted. Also used to connect to class in checkbox. </td>
                </tr>
                <tr>
                    <td>value</td>
                    <td>specific text/ option that will appear in the form except when checkbox input is used. </td>
                </tr>
                <tr>
                    <td>step</td>
                    <td>used in ranges. </td>
                </tr>
            </tbody>
        </table>


    </body>

</html>

## styles.css

head, body, tr, td{
    font-family: serif;
    font-size: 14px;
    font-color: Darkcyan;
    text-align:left;
}

table{
    border: 2px solid palevioletred;
    width: 650px;
    margin: 0 auto;
}

.tabletitle{
    font-family: Georgia;
    font-size: 40px;
    font-color: Purple;
    text-align: center;
    font-weight: bold;
}

.heading{
    font-family: Georgia;
    font-size: 20px;
    font-color: Purple;
    background-color: Palevioletred;
    font-weight: bold;
    text-align: center;
}

td {
    border-top: 1px solid palevioletred;
}
	<html>
	<head>
	<title>My Cheetsheet</title>
	<link href= "./styles.css" type="text/css" rel="stylesheet">
	</head>

	<body>
	<h1 class= "tabletitle">HTML Forms</h1>
	<table>
	<thead>
	<tr class = "heading">
	<th>Input Type</th>
	<th>Description</td>
	<th>Usual Attributes</th>
	</tr>
	</thead>

	<tbody class= "body">
	<tr>
	<td>text</td>
	<td>renders a text field where user can type into </td>
	<td> id, name</td>
	</tr>
	<tr>
	<td>number</td>
	<td>restrict what users can type into the input field to just numbers </td>
	<td>id, name, step </td>
	</tr>
	<tr>
	<td>password</td>
	<td>will replace input text with another character like an asterisk or a dot </td>
	<td>id, name </td>
	</tr>
	<tr>
	<td>range</td>
	<td>limit the values the users can type into </td>
	<td>id, name, min, max, step </td>
	</tr>
	<tr>
	<td>checkbox</td>
	<td>allow users to select multiple options </td>
	<td>id, name, value </td>
	</tr>
	<tr>
	<td>radio</td>
	<td>allow users to select single option </td>
	<td>id, name, value </td>
	</tr>
	<tr>
	<td>dropdown list (select/option)*</td>
	<td>provides the user a dropdown list </td>
	<td>id, name, value </td>
	</tr>
	<tr>
	<td>datalist (datalilst/option)*</td>
	<td>provides the user a dropdown list where they can type into </td>
	<td>list, id, name, value </td>
	</tr>
	<tr>
	<td>textarea*</td>
	<td>textarea element is used to create a bigger text field for users to write more text </td>
	<td>id, name, rows, cols </td>
	</tr>
	<tr>
	<td>submit</td>
	<td>Submits the form </td>
	<td>value </td>
	</tr>
	</tbody>
	</table>
	<br>
	<br>

	<h1 class="tabletitle">Form Attibutes</h1>
	<table>
	<thead>
	<tr class = "heading">
	<th>Attribute</th>
	<th>Description</th>
	</tr>
	</thead>

	<tbody>
	<tr>
	<td>id</td>
	<td>connects the form to the label form </td>
	</tr>
	<tr>
	<td>name</td>
	<td>sent along with value when form is submitted. Also used to connect to class in checkbox. </td>
	</tr>
	<tr>
	<td>value</td>
	<td>specific text/ option that will appear in the form except when checkbox input is used. </td>
	</tr>
	<tr>
	<td>step</td>
	<td>used in ranges. </td>
	</tr>
	</tbody>
	</table>


	</body>

	</html>

	head, body, tr, td{
	font-family: serif;
	font-size: 14px;
	font-color: Darkcyan;
	text-align:left;
	}

	table{
	border: 2px solid palevioletred;
	width: 650px;
	margin: 0 auto;
	}

	.tabletitle{
	font-family: Georgia;
	font-size: 40px;
	font-color: Purple;
	text-align: center;
	font-weight: bold;
	}

	.heading{
	font-family: Georgia;
	font-size: 20px;
	font-color: Purple;
	background-color: Palevioletred;
	font-weight: bold;
	text-align: center;
	}

	td {
	border-top: 1px solid palevioletred;
	}