mirror of
https://github.com/atapas/html-tips-tricks.git
synced 2024-11-16 00:38:26 +01:00
Add a fieldset tag
This commit is contained in:
hrutika985
parent
c062388fce
commit
98504fa811
2 changed files with 200 additions and 86 deletions
58
fieldset/index.html
Normal file
58
fieldset/index.html
Normal file
|
|
@ -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
index.html
228
index.html
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue