[web-bugs] master: clickable labels for radio and checkboxes in bug search form (#96)

Author: peterdd (peterdd) Committer: GitHub (web-flow) Pusher: nikic Date: 2021-10-21T14:16:19+02:00 Commit: https://github.com/php/web-bugs/commit/010107def91e0ea48d5c2e55e8074b7e449a4b43 Raw diff: https://github.com/php/web-bugs/commit/010107def91e0ea48d5c2e55e8074b7e449a4b43.diff clickable labels for radio and checkboxes in bug search form (#96) * usability: make label clickable for radio input * set a right padding for the label so it is obvious the label is for the left side radio select. * clickable labels for asc/desc radio select * right padding also for the asc/desc labels * make the "NOT" checkbox labels clickable Changed paths: M include/functions.php M www/css/style.css M www/search.php Diff: diff --git a/include/functions.php b/include/functions.php index a380cee8..bbfd4735 100644 --- a/include/functions.php +++ b/include/functions.php @@ -681,11 +681,11 @@ function show_boolean_options($current) { $options = ['any', 'all', 'raw']; foreach ($options as $val => $type) { - echo '<input type="radio" name="boolean" value="', $val, '"'; + echo '<input type="radio" id="boolean' . $val . '" name="boolean" value="', $val, '"'; if ($val === $current) { echo ' checked="checked"'; } - echo ">$type&nbsp;\n"; + echo '><label for="boolean' . $val . '">'.$type.'</label>'; } } diff --git a/www/css/style.css b/www/css/style.css index 4423814b..cc59017f 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -593,6 +593,11 @@ td.search-next { width: 33%; } +input[id^="direction"] + label, +input[id^="boolean"] + label { + padding-right: 1em; +} + .Asn { background-color: #bbaaff; } diff --git a/www/search.php b/www/search.php index 27542fc0..e725c56e 100644 --- a/www/search.php +++ b/www/search.php @@ -228,9 +228,8 @@ <select name="order_by"><?php show_order_options($limit);?></select> <br> <small> - <input type="radio" name="direction" value="ASC" <?php if($direction != "DESC") { echo('checked="checked"'); }?>>Ascending - &nbsp; - <input type="radio" name="direction" value="DESC" <?php if($direction == "DESC") { echo('checked="checked"'); }?>>Descending + <input type="radio" name="direction" id="directionasc" value="ASC" <?= $direction != 'DESC' ? 'checked="checked"':'' ?>><label for="directionasc">Ascending</label> + <input type="radio" name="direction" id="directiondesc" value="DESC" <?= $direction == 'DESC' ? 'checked="checked"':'' ?>><label for="directiondesc">Descending</label> </small> <br><br> <input type="hidden" name="cmd" value="display"> @@ -285,7 +284,7 @@ <td style="white-space: nowrap">Return bugs with <b>operating system</b></td> <td> <input type="text" name="php_os" value="<?php echo htmlspecialchars($php_os, ENT_COMPAT, 'UTF-8'); ?>"> - <input style="vertical-align:middle;" type="checkbox" name="php_os_not" value="1" <?php echo ($php_os_not == 'not') ? 'checked="checked"' : ''; ?>> NOT + <input type="checkbox" name="php_os_not" id="php_os_not" value="1" <?php echo ($php_os_not == 'not') ? 'checked="checked"' : ''; ?>><label for="php_os_not">NOT</label> </td> </tr> <tr valign="top"> @@ -298,7 +297,7 @@ <td style="white-space: nowrap">Return bugs reported with <b>CVE-ID</b></td> <td> <input type="text" name="cve_id" value="<?php echo htmlspecialchars($cve_id, ENT_COMPAT, 'UTF-8'); ?>"> - <input style="vertical-align:middle;" type="checkbox" name="cve_id_not" value="1" <?php echo ($cve_id_not == 'not') ? 'checked="checked"' : ''; ?>> NOT + <input type="checkbox" name="cve_id_not" id="cve_id_not" value="1" <?php echo ($cve_id_not == 'not') ? 'checked="checked"' : ''; ?>><label for="cve_id_not">NOT</label> </td> </tr>