Rendering an HTML form element

[srubin]

I am developing a course using canvas that involves the study of HTML.
I wish to display the elements of the form tag. I notice that canvas doesn't render these form element tags in a content page.

For example, I wish to render an example of a textarea and a button. I used the canvas html editor to insert the following;

<p><textarea name="lifeStory" cols="40" rows="5"></textarea></p>

<input value="Submit This Puppy" type="button">

After saving the page, the textarea and button are not displayed on the content page.

I have used the above form tags in moodle and they did display correctly.

How do I get form elements to display in canvas?

[Stef_retired]

 @srubin , the Canvas Rich Content Editor (RCE) has a whitelist of allowed tags, elements, and attributes: Canvas HTML Editor Allowlist. If it's not on that list, it will be stripped out, and your desired text will not display, as you've discovered. I know some designers have successfully displayed unsupported HTML content by creating an HTML file, uploading it to the course's files area, and then embedding that file in an iframe, using code something like this:

<iframe src="/courses/[YOUR COURSE ID]/files/[YOUR FILE ID]/download" width="100%" height="[WHATEVER WORKS]" data-api-endpoint="https://[YOUR CANVAS DOMAIN]/api/v1/courses/[COURSE ID]/files/[FILE ID]" data-api-returntype="File"></iframe>

(I don't actually employ this solution myself, so your mileage may vary.)

Some have solved the problem by hosting the content on another server, and then using an iframe to embed it on the Canvas page, as demonstrated here: iFrames are your iFriend .

So I've shared your question with the Instructional Designers group to get more eyes on it and, I hope, ultimately resolve your design issue.

[sshepard]

Hi all,

Having been badly bit by this issue, I simply use a off-site web server for my own professional reference. Sad when you cannot use Canvas to teach HTML web design.

Steve

[tdw]

Hi  @srubin ​,

As you've discovered, the Rich Content Editor sanitizes input, and really, you won't find any WYSIWYG editor that's good at showcasing HTML.  Instead, I highly recommend using something like codepen.io which allows you to show the HTML/CSS/JS and the rendered page, like this:

Alternatively, you can use the github LTI to embed gists​ and add a link to the rendered HTML​.

The option you choose will probably vary depending on how much you want your students to interact and modify the code.

[srubin · Accepted solution]

Thanks for the reply about this topic - I have decided to link my HTML examples to the college's server.

This should not cause any problems for my students.

steve