Skip to content
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

Add a fieldset tag #4

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

Add a fieldset tag #4

Show file tree
Hide file tree
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
58 changes: 58 additions & 0 deletions fieldset/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>HTML Tips and Tricks - Field Set</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" media="screen" href="../main.css" />
</head>

<body>
<div class="demo">
<a href="../index.html" class="home">
<img src="../home.svg" alt="home" />
</a>
<h2>Logically group your form elements using Fieldset</h2>
<form>
<fieldset>
<legend>Do you exercise atleast 30mins per day?</legend>
Yes<input name="yes" type="radio" value="yes" /> No<input
name="no"
type="radio"
value="no"
/>
</fieldset>
<br />
<br />
<fieldset>
<legend>What type of books do you like to read?</legend>
Action and Adventure<input name="action&adventure" type="radio" />
<br />
<br />
Romance<input name="romance" type="radio" /> <br />
<br />
Detective and Mystery<input name="detective&mystery" type="radio" />
<br />
<br />
Fantasy<input name="fantasy" type="radio" /> <br />
<br />
Historical Fiction<input name="historicalfiction" type="radio" />
<br />
<br />
Horror<input name="horror" type="radio" />
</fieldset>
<br />
<br />
<fieldset>
<legend>What is your favourite programming language?</legend>
<input type="text" />
</fieldset>
</form>
</div>
</body>
</html>
228 changes: 142 additions & 86 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,94 +1,150 @@
<!DOCTYPE html>
<html>

<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>HTML5 Feature Tips</title>
<link rel="apple-touch-icon" sizes="57x57" href="./favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="./favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicons/favicon-16x16.png">
<link rel="manifest" href="./favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="./favicons/ms-icon-144x144.png">
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap" rel="stylesheet">
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>
<link
rel="apple-touch-icon"
sizes="57x57"
href="./favicons/apple-icon-57x57.png"
/>
<link
rel="apple-touch-icon"
sizes="60x60"
href="./favicons/apple-icon-60x60.png"
/>
<link
rel="apple-touch-icon"
sizes="72x72"
href="./favicons/apple-icon-72x72.png"
/>
<link
rel="apple-touch-icon"
sizes="76x76"
href="./favicons/apple-icon-76x76.png"
/>
<link
rel="apple-touch-icon"
sizes="114x114"
href="./favicons/apple-icon-114x114.png"
/>
<link
rel="apple-touch-icon"
sizes="120x120"
href="./favicons/apple-icon-120x120.png"
/>
<link
rel="apple-touch-icon"
sizes="144x144"
href="./favicons/apple-icon-144x144.png"
/>
<link
rel="apple-touch-icon"
sizes="152x152"
href="./favicons/apple-icon-152x152.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="./favicons/apple-icon-180x180.png"
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="./favicons/android-icon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./favicons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="96x96"
href="./favicons/favicon-96x96.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="./favicons/favicon-16x16.png"
/>
<link rel="manifest" href="./favicons/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta
name="msapplication-TileImage"
content="./favicons/ms-icon-144x144.png"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>

<body>
<a
<body>
<a
href="https://github.com/atapas/html-tips-tricks"
target = "_blank"
rel="tag noopener noreferrer">
<img
width="149"
height="149"
src="https://github.blog/wp-content/uploads/2008/12/forkme_left_green_007200.png?resize=149%2C149"
class="attachment-full size-full"
alt="Fork me on GitHub"
data-recalc-dims="1">
target="_blank"
rel="tag noopener noreferrer"
>
<img
width="149"
height="149"
src="https://github.blog/wp-content/uploads/2008/12/forkme_left_green_007200.png?resize=149%2C149"
class="attachment-full size-full"
alt="Fork me on GitHub"
data-recalc-dims="1"
/>
</a>
<div class="demo">
<h1>HTML5 Feature Tips</h1>
<img src="html5.png" alt="HTML5" style="height: 100px;width: 100px;">
<ul class="list">
<li>
<a href='./details/index.html'>
Details Tag</a> - Specify details that the user can open and close on demand
</li>
<li>
<a href='./inputs/index.html'>
Inputs</a> - Various useful tips
</li>
<li>
<a href='./content-editable/index.html'>
Content Editable</a> - Make the content Editable
</li>
<li>
<a href='./mark/index.html'>
Mark Content</a> - Highlight things
</li>
<li>
<a href='./data-attribute/index.html'>
Custom Data</a> - Data with elements
</li>
<li>
<a href='./output/index.html'>
Output Tag</a> - To perform a calculation and show the result
</li>
<li>
<a href='./datalist/index.html'>
Datalist Tag</a> - Allows you to search and add elements
</li>
<li>
<a href='./range/index.html'>
Range(Slider)</a> - Do you need a range slider?
</li>
<li>
<a href='./map/index.html'>
Map</a> - Image map with coordinates
</li>
<li>
<a href='./meter/index.html'>
Meter and Progress</a> - Display a gauge
</li>
<li>
<a href='./dialog/index.html'>
Dialog</a> - Display a Modal Dialog
</li>
</ul>
<h1>HTML5 Feature Tips</h1>
<img src="html5.png" alt="HTML5" style="height: 100px; width: 100px" />
<ul class="list">
<li>
<a href="./details/index.html"> Details Tag</a> - Specify details that
the user can open and close on demand
</li>
<li><a href="./inputs/index.html"> Inputs</a> - Various useful tips</li>
<li>
<a href="./content-editable/index.html"> Content Editable</a> - Make
the content Editable
</li>
<li>
<a href="./mark/index.html"> Mark Content</a> - Highlight things
</li>
<li>
<a href="./data-attribute/index.html"> Custom Data</a> - Data with
elements
</li>
<li>
<a href="./output/index.html"> Output Tag</a> - To perform a
calculation and show the result
</li>
<li>
<a href="./datalist/index.html"> Datalist Tag</a> - Allows you to
search and add elements
</li>
<li>
<a href="./range/index.html"> Range(Slider)</a> - Do you need a range
slider?
</li>
<li>
<a href="./map/index.html"> Map</a> - Image map with coordinates
</li>
<li>
<a href="./meter/index.html"> Meter and Progress</a> - Display a gauge
</li>
<li>
<a href="./dialog/index.html"> Dialog</a> - Display a Modal Dialog
</li>
<li><a href="./fieldset/index.html"> Fieldset</a> - Display a form</li>
</ul>
</div>
</body>

</html>
</body>
</html>