Skip to content

added bootstrap #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
themikemoniker wants to merge 1 commit into
base: main
Choose a base branch
from
Open

added bootstrap #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 111 additions & 48 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,115 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Survey Form</title>
<link rel="stylesheet" href="styles.css"/>
</head>

<body>
<h1 id="title">Survey Form</h1>
<p id="description">Please answer all questions and fill in the required information.</p>
<form id="survey-form">
<label for="name" id="name-label" >Name: <input id="name" type="text" placeholder="Enter your full name" required/></label>
<label for="email" id="email-label">Email: <input id="email" type="email" pattern="[a-z0-9._]+@[com]" placeholder="Enter your email" required/></label>
<label for="password" id="number-label">Password: <input id="number" type="number" pattern="[0-9]" min="0" max="9" placeholder="Enter your password" required></label>

<label for="current-role">Which option best describes your current ownership status?
<select id="dropdown" name="current-role">
<option value="">(select one)</option>
<option value="1">No ownership</option>
<option value="2">Own 1 pet</option>
<option value="3"> Own 2 pets</option>
<option value="4">Own 3+ pets</option>
</select>
</label>

<legend>What kind of pet do you have? (required)</legend>
<label for="cat"><input id="type-cat"type="radio" name="animal-type" value="cat" class="inline" checked >Cat</label>
<label for="dog"><input id="type-dog"type="radio" name="animal-type" value="dog" class="inline">Dog</label>
<label for="other"><input id="type-other" type="radio" name="animal-type" value="other" class="inline">Other obscure animal</label>

<legend>What kind of pets have you always dreamed of having?(Check all that apply)</legend>
<input id="cat" type="checkbox" value="cat" class="inline">Cat<label for="cat"></label>
<input id="dog" type="checkbox" value="dog" class="inline"><label for="dog">Dog</label>
<input id="tiger" type="checkbox" value="tiger" class="inline"><label for="tiger">Tiger</label>

<label for="comments">Comments and concerns?
<textarea id="comments" name="comments" rows="3" cols="30" placeholder="I think that...or I have concerns about..."></textarea>
</label>
<input id="submit" type="submit" value="Submit"/>




</form>



</form>
</body>
<head>
<meta charset="UTF-8">
<title>Survey Form</title>
<link href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" rel="stylesheet">
</head>

<body>
<section class="section">
<div class="container">
<h1 id="title" class="title has-text-centered">Survey Form</h1>
<p id="description" class="subtitle has-text-centered">Please answer all questions and fill in the required information.</p>

<form id="survey-form" class="box">

<!-- Name Field -->
<div class="field">
<label class="label" for="name">Name</label>
<div class="control">
<input id="name" type="text" class="input" placeholder="Enter your full name" required/>
</div>
</div>

<!-- Email Field -->
<div class="field">
<label class="label" for="email">Email</label>
<div class="control">
<input id="email" type="email" class="input" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" placeholder="Enter your email" required/>
</div>
</div>

<!-- Password Field -->
<div class="field">
<label class="label" for="password">Password</label>
<div class="control">
<input id="number" type="password" class="input" placeholder="Enter your password" required>
</div>
</div>

<!-- Dropdown for Ownership Status -->
<div class="field">
<label class="label" for="current-role">Which option best describes your current ownership status?</label>
<div class="control">
<div class="select">
<select id="dropdown" name="current-role">
<option value="">(select one)</option>
<option value="1">No ownership</option>
<option value="2">Own 1 pet</option>
<option value="3"> Own 2 pets</option>
<option value="4">Own 3+ pets</option>
</select>
</div>
</div>
</div>

<!-- Radio Buttons for Animal Type -->
<div class="field">
<legend class="label">What kind of pet do you have? (required)</legend>
<div class="control">
<label class="radio">
<input id="type-cat" type="radio" name="animal-type" value="cat" checked>
Cat
</label>
<label class="radio">
<input id="type-dog" type="radio" name="animal-type" value="dog">
Dog
</label>
<label class="radio">
<input id="type-other" type="radio" name="animal-type" value="other">
Other obscure animal
</label>
</div>
</div>

<!-- Checkboxes for Dream Pets -->
<div class="field">
<legend class="label">What kind of pets have you always dreamed of having? (Check all that apply)</legend>
<div class="control">
<label class="checkbox">
<input id="dream-cat" type="checkbox" value="cat">
Cat
</label>
<label class="checkbox">
<input id="dream-dog" type="checkbox" value="dog">
Dog
</label>
<label class="checkbox">
<input id="dream-tiger" type="checkbox" value="tiger">
Tiger
</label>
</div>
</div>

<!-- Comments Section -->
<div class="field">
<label class="label" for="comments">Comments and concerns?</label>
<div class="control">
<textarea id="comments" name="comments" rows="3" class="textarea" placeholder="I think that... or I have concerns about..."></textarea>
</div>
</div>

<!-- Submit Button -->
<div class="field">
<div class="control">
<button id="submit" type="submit" class="button is-primary is-fullwidth">Submit</button>
</div>
</div>

</form>
</div>
</section>
</body>
</html>