39 lines
1.5 KiB
HTML
39 lines
1.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" >
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>CodePen - Details element for help text</title>
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
|
||
|
|
<link rel="stylesheet" href="./style.css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- partial:index.partial.html -->
|
||
|
|
<div class="panel">
|
||
|
|
<h1>Use of <details> for help text</h1>
|
||
|
|
<p>You can use the details element to provide additional information on fields that new users might need help with.</p>
|
||
|
|
<p>Click on the help icon to toggle the help text.</p>
|
||
|
|
<hr>
|
||
|
|
<form>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="participants" class="form-group-label">Name</label>
|
||
|
|
<div class="form-group-input-container">
|
||
|
|
<input type="text" id="participants" class="form-control" placeholder="e.g. Harry Potter">
|
||
|
|
<details>
|
||
|
|
<summary><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle">
|
||
|
|
<circle cx="12" cy="12" r="10" />
|
||
|
|
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
|
||
|
|
<line x1="12" y1="17" x2="12.01" y2="17" /></svg></summary>
|
||
|
|
<small class="form-group-help">
|
||
|
|
The name that will be displayed in your public profile.
|
||
|
|
</small>
|
||
|
|
</details>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<!-- partial -->
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|