Configuring a checkbox in CSS and php

Without hands-on testing, about all I can say is that the HTML posted here looks OK.  The only required parts are the input type= and name= attributes.  These should be sufficient to get the input control into the request variables.

One important thing to know about checkboxes (and radio buttons) -- if they are not selected, they are completely absent from the request.  This is different from other types of inputs, where the element is present in the request, but is empty.
https://www.experts-exchange.com/articles/5450/Common-Sense-Examples-Using-Checkboxes-with-HTML-JavaScript-and-PHP.html

The value of the for attribute should be the element id, not the element name. Try:

        <div class="6u 12u$(small)">
		<input type="checkbox" id="demo-copy" name="agree">
		<label for="demo-copy"><strong>I agree to the user Terms and Conditions</strong></label>
        <?php create_form_input('agree', 'checkbox', $reg_errors); ?>
		</div>

Select allOpen in new window

By the way, an element id which contains a dash can require special handling when referencing that element in javascript. I usually avoid using punctuation characters other than the underscore in ids and class names. Even though they are acceptable in HTML, some punctuation characters require escaping or encoding in CSS or javascript selectors.

What is this doing

create_form_input('agree', 'checkbox', $reg_errors); 

Select allOpen in new window

What does the resulting generated code look like?

This is what I used to verify that the checkbox worked correctly as written.  Agree with Kim that the HTML surrounding it may be misaligned, but I couldn't see anything that was inherently wrong with the HTML.
https://iconoun.com/demo/temp_wchirnside.php

<?php // demo/temp_wchirnside.php
/**
 * https://www.experts-exchange.com/questions/28995259/Configuring-a-checkbox-in-CSS-and-php.html
 */
error_reporting(E_ALL);

var_dump($_POST);

?>

<!-- ADDED FORM TAGS AND SUBMIT BUTTON -->
<form method="post">

<div class="6u 12u$(small)">
<input type="checkbox" id="demo-copy" name="agree">
<label for="agree"><strong>I agree to the user Terms and Conditions</strong></label>
<?php /* REMOVED create_form_input('agree', 'checkbox', $reg_errors); */ ?>
</div>

<input type="submit" />
</form>

Select allOpen in new window

Thanks for the above comments:

First of all I should probably say that my goal was to get a nicer bigger checkbox, other than the default. So I grabbed some html and css code from a site that gives permission for others to use their code. The CSS file has over 3,000 lines. So I am trying to combine this with my regular code. I will get rid of excess CSS later.

However, at this point I have added some variations. When I click the LAST VERSION - number 4 -  the first box fills up. I also don't know if that means it would get passed to the database.

Also, I have a forms functions file.

HTML Code:

		<p class="noticeType"><label for="agree"></label></p>
		<?php create_form_input('agree', 'checkbox', $reg_errors); ?>
        I agree to the user Terms and Conditions-1

        <div class="6u 12u$(small)">
		<input type="checkbox" id="demo-copy" name="agree">
		<label for="agree"><strong>I agree to the user Terms and Conditions-2</strong></label>
        <?php create_form_input('agree', 'checkbox', $reg_errors); ?>
		</div>
        
        <div class="6u 12u$(small)">
		<input type="checkbox" name="agree">
		<label for="agree"><strong>I agree to the user Terms and Conditions-3</strong></label>
        <?php create_form_input('agree', 'checkbox', "demo-copy", $reg_errors); ?>
		</div>
        
        <div class="6u 12u$(small)">
		<input type="checkbox" id="demo-copy" name="demo-copy">
		<label for="demo-copy"></label><strong>I agree to the user Terms and Conditions-4</strong></label>
		</div>
        <br />

Select allOpen in new window

Form Functions Code  

} elseif ($type == 'checkbox') { // Create a CHECKBOX.

		// Start creating the input:
		echo '<input type="' . $type . '" name="' . $name . '" value="';

       
	   // Add the value to the input:
		if ($value) echo ' value="' . htmlspecialchars($value) . '"';
		
		
		// Display the error:
		if (array_key_exists($name, $errors)) {
			
			echo ' />';		
		}

Select allOpen in new window

Still interested in what
<?php create_form_input('agree', 'checkbox', "demo-copy", $reg_errors); ?>
Renders out ....

I think we need to see the generated HTML after the web page is rendered.  It looks like part of the HTML may explicitly coded, and part of the HTML may be coming from PHP create_form_input(), so there may be a risk of a name attribute collision in the final HTML document.

This will give the effect of a bigger, custom checkbox.  Styling of checkboxes and radio buttons has always been kind of a pain.

Image links:
https://iconoun.com/demo/images/unchecked.png
https://iconoun.com/demo/images/checked.png

Example:
https://iconoun.com/demo/temp_wchirnside.php

<?php // demo/temp_wchirnside.php
/**
 * https://www.experts-exchange.com/questions/28995259/Configuring-a-checkbox-in-CSS-and-php.html
 */
error_reporting(E_ALL);

var_dump($_POST);

?>

<!-- STYLES FOR CHECKBOX AND RADIO -->
<head>
<style type="text/css">
.hide {
   display: none !important;
}

.myCheckbox span {
    width: 28px;
    height: 28px;
    display: block;
    background: url("images/unchecked.png");
}

.myCheckbox input:checked + span {
    background: url("images/checked.png");
}
</style>

</head>
<body>

<form method="post">

<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
    <input type="checkbox" name="test" class="hide" />
    <span></span>
</label>

<input type="submit" />
</form>

Select allOpen in new window

It appears as if you're using CSS sprites or something similar to represent the checkbox and hiding the real checkbox. The easiest way to predict what will be submitted to your database is to allow the real checkbox to show during your testing and troubleshooting. Then you can see which checkbox is being checked. You can hide the real checkbox again when you're satisfied with your program.

In these methods where the real checkbox is hidden, the label element is what receives the click event and checks or unchecks the real checkbox. Ray has presented a very simple method of achieving this above. In his example, the checkbox is a child element of the label element and doesn't require a for attribute. In other methods, where the checkbox is not a child element of the label, it is imperative that the for attribute is used and properly configured. The value in the for attribute must match the real checkbox's id attribute value.

The for attribute does not recognize the input elements name because in radio button and checkbox groups, multiple input elements have the same name.

Kim Walker's code as listed above did not work and is example no. 5 in my image below.

I have not tried Ray Paseur's checkbox code as yet as I think the code I have should work eventually and would like the checkbox to match the rest of the boxes in the form - if I can.

Not sure what you mean exactly by rendering out the page, however, below is a screen image of five of the examples. The FIRST one should be the default that I have used on other sites but in this case is not showing up and would be very tiny.

The second box is filled but that happens when I click one of the bottom two. The third one just does nothing.

		<p class="noticeType"><label for="agree"></label></p>
		<?php create_form_input('agree', 'checkbox', $reg_errors); ?>
        I agree to the user Terms and Conditions

        <div class="6u 12u$(small)">
		<input type="checkbox" id="demo-copy" name="agree">
		<label for="agree"><strong>I agree to the user Terms and Conditions - 2</strong></label>
        <?php create_form_input('agree', 'checkbox', $reg_errors); ?>
		</div>
        
        <div class="6u 12u$(small)">
		<input type="checkbox" name="agree">
		<label for="agree"><strong>I agree to the user Terms and Conditions - 3</strong></label>
        <?php create_form_input('agree', 'checkbox', "demo-copy", $reg_errors); ?>
		</div>
        
        <div class="6u 12u$(small)">
		<input type="checkbox" id="demo-copy" name="demo-copy">
		<label for="demo-copy"></label><strong>I agree to the user Terms and Conditions - 4</strong></label>
		</div>
        <br />
        <div class="6u 12u$(small)">
		<input type="checkbox" id="demo-copy" name="agree">
		<label for="demo-copy"><strong>I agree to the user Terms and Conditions - 5</strong></label>
        <?php create_form_input('agree', 'checkbox', $reg_errors); ?>
		</div>

Select allOpen in new window

would like the checkbox to match the rest of the boxes in the form

That makes sense to me!  Why not treat all of the boxes the same way?  Just use your preferred image art.  I would consider using SVG images, too, if browser support is adequate (I have not tested SVG).

Image links:
https://iconoun.com/demo/images/unchecked.png
https://iconoun.com/demo/images/checked.png

Example:
https://iconoun.com/demo/temp_wchirnside.php

Rendering means how PHP creates the HTML that is sent to the browser. PHP script is run on the server - no PHP script ends up in the browsers - it is converted into HTML output. In your code you have posted there is a PHP function (create_form_input) that is potentially adding HTML to the page. We cannot see what that is because you have not posted the source for the create_form_input function. Therefore we are asking you to give us the final HTML that results from this call.

To do this:
- Please load the page in your browser.
- Right click the page
- Select View Source
- Copy the HTML from the view source window and paste it to a CODE tag here or attach it as a file.

We need to see how this PHP is coming out on the page

<?php create_form_input('agree', 'checkbox', $reg_errors); ?>

Select allOpen in new window

Thanks. I was hesitating to post too much code as in previous questions, I have been told that this is not a good thing to do.

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Register</title>

<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="assets/css/main.css" />
<!-- 
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build 
-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>

<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>

		<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
		<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
	</head>


		<!-- Page Wrapper -->
			<div id="page-wrapper">

				<!-- Header -->
	<header id="header" class="alt">
						<nav id="nav">
							<ul>
								<li class="special">
									<a href="#menu" class="menuToggle"><span><h2>Menu</h2></span></a>
									 <div id="menu">
										<ul>
											<li><a href="#">Home</a></li>
											<li><a href="ImageMani.html	">Image Manipulation</a></li>
											<li><a href="orderWebsite.html">Order A Website</a></li>
											<li><a href="webElements.html">Web Elements</a></li>
											<li><a href="loginWCGraphic.php">Login</a></li>
										</ul>
									</div>
								</li>
							</ul>
						</nav>
					</header> 
  <div id="content">
    <p>&nbsp;</p>
    <img src="images/TBRlogoComStacked.jpg" alt="TBR Mobile Logo"/><br />
    <div class="select-wrapper">
    <h3 class="REGISTER">REGISTER</h3>
<p> <strong>Note: Please write down your information for your own reference. Enter information in all of the form fields.</strong><br />
</p>
	
<p><strong> All registered users must be of 18 years of age or older and agree to the Terms and Conditions in the following link  <a href="TBRTerms.php">Terms and Conditions</a>.</strong></p>

<form action="Register.php" method="post" accept-charset="utf-8">

		<p class="noticeType"><label for="agree"></label></p>
		<input type="checkbox" name="agree" id="agree" size=50" />        I agree to the user Terms and Conditions

        <div class="6u 12u$(small)">
		<input type="checkbox" id="demo-copy" name="agree">
		<label for="agree"><strong>I agree to the user Terms and Conditions - 2</strong></label>
        <input type="checkbox" name="agree" id="agree" size=50" />		</div>
        
        <div class="6u 12u$(small)">
		<input type="checkbox" name="agree">
		<label for="agree"><strong>I agree to the user Terms and Conditions - 3</strong></label>
        <input type="checkbox" name="agree" id="agree" size=50" />		</div>
        
        <div class="6u 12u$(small)">
		<input type="checkbox" id="demo-copy" name="demo-copy">
		<label for="demo-copy"></label><strong>I agree to the user Terms and Conditions - 4</strong></label>
		</div>
        <br />
        <div class="6u 12u$(small)">
		<input type="checkbox" id="demo-copy" name="agree">
		<label for="demo-copy"><strong>I agree to the user Terms and Conditions - 5</strong></label>
        <input type="checkbox" name="agree" id="agree" size=50" />		</div>
        <br />
        <p><label for="first_name"><strong>First Name</strong></label>
		<p class="noticeType">Please enter your first name or NA if non applicable.</p>
		<input type="text" name="first_name" id="first_name" size=50" /></p>
        
        <p><label for="mid_initial"><strong>Middle Name or Initial</strong></label>
		<p class="noticeType">Please enter your middle name or initial or NA if non applicable.</p>
		<input type="text" name="mid_initial" id="mid_initial" size=50" /></p>
		
		<p><label for="last_name"><strong>Last Name</strong></label>
		<p class="noticeType">Please enter your last name or initial or NA if non applicable.</p>
		<input type="text" name="last_name" id="last_name" size=50" /></p>
		
		<p><label for="username"><strong>Desired Username</strong></label>
        <p class="noticeType">Only a combination of letters and numbers are allowed with no special characters &#150 from 
        two to thirty in total.</p>
		<input type="text" name="username" id="username" size=50" /> </p>

  <p><label for="email"><strong>Email Address</strong></label>
   	  <p class="noticeType"> Please enter a valid email address and check the spelling. Our website will recognize a proper email format but not typrographical errors.</p><input type="text" name="email" id="email" size=50" /></p>
		
		<p><label for="pass1"><strong>Password</strong></label>
       	<p class="noticeType"> Must be between 6 and 20 characters long, with at least one lowercase letter, 
        one uppercase letter, and one number.</p>
        <input type="password" name="pass1" id="pass1" size=50" /></p>
		
        <p><label for="pass2"><strong>Confirm Password</strong></label><br /></p>
		<input type="password" name="pass2" id="pass2" size=50" /></p>
       
<button class="button" style="vertical-align:left"><span>Register</span></button><br />
<button class="button" style="vertical-align:left" input type="reset"><span>Clear and Restart</span></button><br />
</form>
</div>
</div>
                 <!-- Footer -->
					<footer id="footer">
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_sharing_toolbox"></div><br />
						<ul class="copyright">
							<h3>
							  <li>&copy; Wanda Chirnside Graphic Design<br>
<a href="http://www.wcgraphicdesign.ca">www.wcgraphicdesign.ca</a></li>
							</h3>
						</ul>
					</footer>

		<!-- Scripts -->
			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/jquery.scrollex.min.js"></script>
			<script src="assets/js/jquery.scrolly.min.js"></script>
			<script src="assets/js/skel.min.js"></script>
			<script src="assets/js/util.js"></script>
			<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
			<script src="assets/js/main.js"></script>

<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-56fb240ef759c677"></script>
  </div> 
</div>
</div>


</body>
</html>

Select allOpen in new window

Okay thanks, Julian.

I put in your code, and again with the one of the lines moved around. I still have the problem of the checkbox that is showing up, not being checked. In your version the checkbox doesn't show up.

When I hit the register button it asks me to agree to the terms and conditions.

		<div class="6u 12u$(small)">
		<label for="agree"><strong>I agree to the user Terms and Conditions - 2</strong></label>
        <?php create_form_input('agree', 'checkbox', $reg_errors); ?>
		</div>
        
        <div class="6u 12u$(small)">
        <?php create_form_input('agree', 'checkbox', $reg_errors); ?>
		<label for="agree"><strong>I agree to the user Terms and Conditions - 2</strong></label>
        </div>

Select allOpen in new window

Wow, I thought I had seen everything, but I've never seen HTML containing two checkboxes with the same name and value.  I'll do some testing around that and see what happens.  I know that one will overwrite the other, but that might not matter to the behavior of the action= script if they send the same value in the request.

Also, I would be a little concerned about this line in the HTML:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

If that's really from 2008, that's really, really old, and probably worth reviewing for modern-day relevance.

Thank you all for your help.

The problem seemed to be in the CSS. I removed all CSS that contained "checkbox" and then used the old code. This gave me the default checkbox that is working. So I may persue a different style of checkbox in the future.