cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
srubin
Community Member

Rendering an HTML form element

Jump to solution

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?

Tags (2)
1 Solution

Accepted Solutions

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

View solution in original post

3 Replies
Stefanie
Community Team
Community Team

 @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.

dwahl_sales
Instructure
Instructure

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:

Screen Shot 2016-07-05 at 8.51.47 AM.png

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.

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

View solution in original post