How to add "title" attribute to input form field

Sathish Kannan asked on April 13, 2016 14:45

I just want to add "title" attribute to all of my form input fields, how to add this?

I can see "Field description" in form fields but this is not useful because it effects only user hovers on label but I want to display title on hovering input field. Thanks in advance!

forms input field

Correct Answer

Petar Kozjak answered on April 13, 2016 16:03

Hi,

not sure can you add title in Forms out of the box, but you can use jQuery, here is some example code:

$("input, textarea").each(function(){
    $(this).attr("title", "Some Value");
});

4 votesVote for this answer Unmark Correct answer

Recent Answers

Chetan Sharma answered on April 13, 2016 15:27

Hi Sathish,

If you go to "Forms" through search on CMS. Click on the pencil link associated with your farm and go to layout to see your form layout. Once you will click inside WYSIWYG editor you will see Form controls above with "Source" button. This will help you see HTML source of your form. There you can go to any input tag and and title.

Hope this helps.

Thanks, Chetan

0 votesVote for this answer Mark as a Correct answer

Chetan Sharma answered on April 13, 2016 19:09

Hi Petar/Sathish,

I'm glad that you guys are able to workout a solution.

This approach doesn't seem to be optimal approach. Primarily for two reasons.

It takes away ability from a content contributor to change titles as you are fixing content with Js.
This will set all input tags with same title which will be incorrect from accessibility perspective. I don't know if Sathish cares about it.

Cheers, Chetan

0 votesVote for this answer Mark as a Correct answer

Petar Kozjak answered on April 14, 2016 10:03

Hi,

there are 2 possible solutions, one to customize Form or build a custom form, other is to write JS. I think this is faster approach.

Yes and it isn't a full solution, it is just an code example.

0 votesVote for this answer Mark as a Correct answer

Sathish Kannan answered on April 14, 2016 14:20

Hey Chetan,

I do care about the same title, but it's just a matter of getting placeholder value and set this to "title" attribute.

For ex:
$("input, textarea").each(function(){
$(this).attr("title", $(this).attr('placeholder'));
});

And the reason why your answer is not suitable for my condition is, if I go to WYSIWYG editor in "Forms -> Layout -> HTML Source", I could only see my code like this "$$label:TextBoxControl$$$$input:TextBoxControl$$", there is no option to add title attribute to "input".

Finally, I got ended in wrapping input field with label, so I have bypassed these both answers.

Anyways, thanks for your support team!

0 votesVote for this answer Mark as a Correct answer