HTML + CSS + JS Cheatsheet for Survey Scripting
1. HTML
1.1 Basic Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Survey Form</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
1.2 Common Tags
• Headings: <h1> to <h6>
• Paragraph: <p>
• Lists: <ul>, <ol>, <li>
• Links: <a href="url">Click</a>
• Images: <img src="[Link]" alt="desc">
1.3 Forms
<form id="surveyForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required placeholder="Enter your name">
<label>Gender:</label>
<input type="radio" name="gender" value="Male" required> Male
<input type="radio" name="gender" value="Female"> Female
<label>Languages Known:</label>
<input type="checkbox" name="lang" value="HTML"> HTML
<input type="checkbox" name="lang" value="CSS"> CSS
<label for="country">Country:</label>
<select id="country" name="country">
<option value="IN">India</option>
<option value="US">USA</option>
</select>
<button type="submit">Submit</button>
</form>
Key Attributes:
• id → unique identifier
• name → field name for server submission
• required → mandatory field
• placeholder → hint text
1.4 Semantic Tags
• <header>, <footer>, <section>, <article>
• <fieldset> and <legend> → group related form elements
1.5 Useful Input Types
• email, number, date, url, password
2. CSS
2.1 Selectors
/* Class selector */
.input-field { border: 1px solid #ccc; }
/* ID selector */
#submitBtn { background: green; color: white; }
/* Element selector */
input { padding: 5px; }
/* Pseudo-classes */
input:focus { border-color: blue; }
li:first-child { font-weight: bold; }
/* Grouping */
input, select, textarea { margin-bottom: 10px; }
2.2 Box Model
• margin → outside spacing
• border → outline
• padding → inner spacing
• width/height → content size
2.3 Flexbox (for layout)
form { display: flex; flex-direction: column; gap: 10px; }
2.4 Conditional Formatting
input:invalid { border-color: red; }
input:valid { border-color: green; }
3. JavaScript
3.1 DOM Selection
const form = [Link]('surveyForm');
const nameInput = [Link]('#name');
const checkboxes = [Link]('input[type="checkbox"]');
3.2 Event Handling
[Link]('submit', function(e) {
[Link](); // Prevent page refresh
alert('Form submitted!');
});
[Link]('input', function() {
[Link]('Name:', [Link]);
});
Common Events:
• onclick
• onchange
• onsubmit
• oninput
3.3 Form Validation
function validateForm() {
const name = [Link]();
if (name === '') {
alert('Name is required');
return false;
return true;
HTML5 built-in validation:
• required, pattern, min, max, type="email"
3.4 Working with Arrays & Objects
// Survey responses
const responses = [
{name: 'Alice', gender: 'F', lang: ['HTML','CSS']},
{name: 'Bob', gender: 'M', lang: ['JS']}
];
// Looping
[Link](r => [Link]([Link]));
// Filtering
const htmlUsers = [Link](r => [Link]('HTML'));
3.5 Async Operations (fetching data)
async function submitSurvey(data) {
try {
const res = await fetch('[Link] {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: [Link](data)
});
const result = await [Link]();
[Link](result);
} catch (err) {
[Link]('Error:', err);
4. Quick JS & HTML Tips for Survey Scripting
• Use [Link]('input[name="gender"]:checked') to get selected radio
button.
• Use [Link]() to convert NodeList to array.
• Validate email with input[type="email"].
• Use [Link]() to clear the form after submission.
5. Excel & Data Handling (for survey data)
• SUMIF, COUNTIF, VLOOKUP, HLOOKUP, INDEX+MATCH, XLOOKUP
• Pivot Tables to summarize survey responses
• Conditional formatting to highlight missing or invalid data
• TEXTJOIN to merge first & last names
