Fill-in forms on iPad

[sbell]

So I have gotten myself into a situation. I created a demo back in October for a publisher who puts out test preparation guides and every now and then one of their books has a fill in area. I wanted to know if I could use <input> and <textarea> in a <form>. And it worked!

Cut to two weeks later when Apple releases an update for iOS and guess what? That element is no longer supported. I don't know if that was Apple finally agreeing to follow the IDPF spec (which doesn't support <input>) or just a current bug with their latest update.

Here's the thing, though: <input> with the type of checkbox works. What seems to not be working is the call to the keyboard for the text <input>.

The publisher loved this demo! Now they are expecting this. Does anyone know a way to force the <input> to make the call to the keyboard?

If that fails, I'm going to have to resort to writing some weird canvas/javascript textbox element that may or may not work. And honestly, I'm not entirely sure how to go about doing that, because the only thing I've found close to that relies on the text <input>. So if anyone has any pointers on that, that would make you a demi-god in my personal pantheon of gods (so right below Carl Sagan and to the right of Julia Child).

And to emphasize, this is iOS only. Thanks.

[sbell]

Okay, after pouring over the EPUB3 Content Documents thoroughly I finally figured out how to do this: You cannot create the form just in the xhtml file, it needs to be embedded in a container. To get the form to work I needed to load the file into an iframe. But currently to control an iframe in iBooks you'll need to place the iframe in a div. So basically it looks like this:

<div class="box">
<iframe class="content" src="Inset01.html"></iframe>
</div>

Also, in the content.opf file you'll need to add this (bolded) to the file's entry in the manifest:

<item href="Inset01.xhtml" id="Inset" media-type="application/xhtml+xml" properties="scripted" />

You'll also need to add that to the parent page of this file.

There is one issue, though: you can type in the form, but after you flip the page, close the book, or exit iBooks the form resets. Nothing stays. The reason is that the file is reloaded anew each time. I tried to have the iframe load a file from an external url to see if the form could be saved that way, but in iBooks you cannot load external urls apparently. This is more than likely a security measure. So currently I am looking for an alternative way to do this, but the good news is I did at least get the form to call up the keyboard again. If anyone knows how to save the info input into the form I'd love to hear it.

[DaleDe]

You might try a javascript.

Dale

[sbell]

Initially I used a bit of jQuery that employed the load function, but iBooks appears to not allow that particular function. And again the issue comes up with iBooks not allowing the loading of external links/urls. The possible solution of using javascript in the forms hits a wall with when it comes to the previous issues: you cannot overwrite a file within the EPUB and you cannot load a file from an external source(non-local to the EPUB itself) into a container.

[DaleDe]

Ah, but you might be able to save the file externally that you created but couldn't save internally, using the techniques you outlined.

[MPage]

Originally Posted by sbell

Also, in the content.opf file you'll need to add this (bolded) to the file's entry in the manifest:

<item href="Inset01.xhtml" id="Inset" media-type="application/xhtml+xml" properties="scripted" />

Nice move !
I reproduced what you propose and it works, but I do not succeed to control the iframe height : whatever height attribute I give it, the iframe occupies the space of one page. Did you have the same problem ?
Michel