Jump to content

<p> tag next to an input box


Recommended Posts

I am trying to figure out how to get the instructions to display next to the input box. Right now the text is displaying within the text box and is being cut off. The placeholder='$entry_instructions' is the information that needs to be moved to a <p> tag next to the input box. 

$attr_input = "<input type='text' id='attribute_$tracker_alert_attribute_id' name='attribute_$tracker_alert_attribute_id' ".
                  "value='$value' placeholder='$entry_instructions' $trigger_on_change_html>";
} else {
   $attr_input = "<input type='text' name='attribute_$tracker_alert_attribute_id' placeholder='$entry_instructions' value='$value' size='10'>";
}

Link to post
Share on other sites

Instead of using the placeholder attribute, have you tried putting the instructions outside of the <input> tag? Maybe something like this:

$attr_input = "<input type='text' id='attribute_$tracker_alert_attribute_id' name='attribute_$tracker_alert_attribute_id' value='$value' $trigger_on_change_html> $entry_instructions";
Link to post
Share on other sites

 

or just use label after the input statement and it perfectly HTML 

$attr_input .= '<label for="tracker">' . $entry_instructions . '</label>';

 

Just be aware that the for attribute in the <label> tag needs to match the id attribute in the <input> tag. Otherwise, the <label> tag won't do anything. Or, if you want, the <label> tag can be wrapped around the <input> tag. Then the for and id attributes are not needed. More information can be found here:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Link to post
Share on other sites
This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.