Simple question, however I can't find an answer anywhere.
I need a text input that can display HTML in it's value i.e:
<input type="text" name="guest_sc_player" id="guest_sc_player" size="27" value="<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F34196707&show_artwork=true"></iframe>" />
Most of the other answers will work for this specific situation, but the correct way to do this is to HTML Encode the entire value:
<input type="text" name="guest_sc_player" id="guest_sc_player" size="27" value="<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F34196707&show_artwork=true"></iframe>" />
jsfiddle
This avoids the necessity of worrying whether there may be single or double quotes in the value string. Depending on what platform you're using, there's probably a convenience method to do this automatically. e.g. HttpUtility.HtmlEncode in .NET
<input type="text" name="guest_sc_player" id="guest_sc_player" size="27" value='<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F34196707&show_artwork=true"></iframe>' />
single quotes work too.
Replace those double quotes within the value property with ".
First, you need to encode all the characters that are required to be encoded.
Then, you can surround the string in single quotes.
<input type="text" name="guest_sc_player" id="guest_sc_player" size="27" value='<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F34196707&show_artwork=true"></iframe>' />
Related
I've been trying to add a recaptcha to my website and I've added the widget but here's the problem - the user can click the submit button before finishing the recaptcha and that just defeats the whole purpose of having a recaptcha at all.
How can I make the button appear only when the reCaptcha is finished?
Screenshots are attached, thanks in advance
<h1 style="font-family: sans-serif">Shorten a URL!</h1>
<form action="/shortenurl" method="POST">
<input type="text" name="url" placeholder="URL..."/>
<iframe title="reCAPTCHA" src="boring recaptcha" role="presentation" name="a-3dswbffhbuei" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-storage-access-by-user-activation" width="304" height="78" frameborder="0"></iframe>
<input id="sm" type="submit" value="Shorten URL!" />
</form>
</div>
just add the required attribute in input tag
<input type="text" name="url" placeholder="URL..." required/>
I am trying to create a code in HTML that embeds a YouTube video (but the URL that you entered). I would enter the url (ex: www.youtube.com/watch?v=XXXXXXXXXXX), and then it would embed that video.
This is what I have so far: (I am very new to HTML)
<!DOCTYPE html>
<html>
<form>
Video URL:<br>
<input id="url" type="url">
<iframe width="560" height="315" src="url" frameborder="0" allowfullscreen></iframe>
</form>
<iframe width="420" height="315"
src="url">
</iframe>
</html>
Try to continue from that fiddle:
https://jsfiddle.net/8kodfrsy/
What I've made was just to change the video src attribute.
document.getElementById('myframe').src = url;
If you reference this answer here you'll notice that the video's url needs to have /embed/<video id>
So, for example, if you have the following url:
https://www.youtube.com/watch?v=ChOTlnQZ4uU
You're going to change it to:
https://www.youtube.com/embed/ChOTlnQZ4uU
So, just transform the string to get the video id and modify the url string using simple js.
Check this on how to transform the string url.
The best answer is, I believe, the following code:
<form action="http://www.youtube.com/results" method="get" target="_blank" >
<input name="search_query" type="text" maxlength="128" />
<select name="search_type">
<option value="">Videos</option>
<option value="search_users">Channels</option>
</select>
<input type="submit" value="Search" />
</form>
I want to know what <input type="hidden"> is doing in the following HTML.
<form method="post" enctype="multipart/form-data">
<table width="350" border="0" cellpadding="1" cellspacing="1" class="box">
<tr>
<td width="246">
<input type="hidden" name="MAX_FILE_SIZE" value="2000000">
<input name="userfile" type="file" id="userfile">
</td>
<td width="80"><input name="upload" type="submit" class="box" id="upload" value=" Upload "></td>
</tr>
</table>
</form>
it is specifying a form value that will including with the post, but not shown on the screen to the user, hence the hidden. In this case it is specifying the max file size that the form should allow to upload. It isn't very secure, since you can craft your own post to send.
Because it's just a bunch of data that's sent to the script, you just can guess it :)
My guessing is, that this field limits the size of the file you can upload - most likely in bytes, so it's around 2MB you can upload.
Please keep in mind, that the script, using this output does not need to handle this data. If it isn't handled in the script, it's ignored.
The file-size is may not only controlled by this hidden field ...
In general hidden input is added to send some additional info along with non-hidden data. It could be a session ID, encoded metadata, or whatever. Actually I don't see the reasons for adding MAX_FILE_SIZE cause this value could be set in php.ini file (in case of using PHP as a server-side platform).
I am trying to put a status image (showing a tick if email is correct or cross if not) next to the email field in my form.
The problem is my registration form is using the table method , so the image is not showing next to the field but below it. Can anyone help me out here?
This is what I tried to do but still not work the way I want it to.
<table width="500" border="0">
<tr><td width="210" height="45">Email:</td><td>
<input type="text" size="40" name="userEmail" id="userEmail" onkeyup="checkEmail(this.value);" onblur="checkEmail(this.value);" maxlength="60" />
**<img id="status" src="images/bad.png" style="margin-left:5px; vertical-align:middle;" alt="Status" /></td></tr>**
</table>
The issue is because the <td> has not enough space to fit in both text field and the image.
either add more width to the <table> or the 2nd <td> will solve the problem.
Since your image is of a check mark and an x, just use the unicode equivalents:
✔ = ✔
✘ = ✘
And simply get rid of the image altogether.
All it needs right now is space to fit in.
<table width="650px" border="0">
<tr><td width="210px" height="45">Email:</td><td>
<input type="text" size="40" name="userEmail" id="userEmail" onkeyup="checkEmail(this.value);" onblur="checkEmail(this.value);" maxlength="60" />
**<img id="status" src="https://www.google.ca/images/srpr/logo4w.png" width="125px" height="50px" style="margin-left:5px; vertical-align:middle;" alt="Status" /></td></tr>**
</table>
Take a look at this fiddle, what changed is the size of the table containing the column. You may either reduce the input width or let it more space by increasing the table width.
I have built facebook app. It's hosted on:
http://resihop.herokuapp.com/.
The app is suppose to be visible here:
https://apps.facebook.com/393963983989013/
On facebook it's embedded in an iframe. The weird part is that for some users the content of the iframe is empty, just:
and for some users it displays the page. Here is the html: that I got from inspect element:
Working:
<div>
<noscript><div class="mas"><div class="pam uiBoxRed">Du måste ha javascript aktiverat i din webbläsare för att använda Facebook-applikationer.</div></div></noscript>
<form action="https://resihop.herokuapp.com/?fb_source=search&ref=ts" method="post" target="iframe_canvas_fb_https" id="canvas_iframe_post_4fe8ad942b9be6531902412" onsubmit="return Event.__inlineSubmit(this,event)">
<input type="hidden" autocomplete="off" name="signed_request" value="x4b_ddxAkL71eQEdopzIZJpWZCmTPFqOMmmMvx_TCC8.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImV4cGlyZXMiOjEzNDA2NTQ0MDAsImlzc3VlZF9hdCI6MTM0MDY0ODg1Miwib2F1dGhfdG9rZW4iOiJBQUFGbVR1TlI2UlVCQU9zQkRkc2hwbkpNN0pKR0ZaQTNsaGhtMlViNWFlWkFpeFpDNnNYcWVEbXpaQjVqb1dtVUwzVTg1WW5wUWg2WkJVdUxQV3o2M1lIQk5aQVQ4a3dNNGNtWkExZU00MXZ5SU5KeVpDeWFpbDhWIiwidXNlciI6eyJjb3VudHJ5Ijoic2UiLCJsb2NhbGUiOiJzdl9TRSIsImFnZSI6eyJtaW4iOjIxfX0sInVzZXJfaWQiOiIxMDAwMDA2MjcwMTQzODQifQ">
</form>
<iframe class="smart_sizing_iframe" frameborder="0" scrolling="yes" id="iframe_canvas" name="iframe_canvas_fb_https" src='javascript:""' height="800" style="height: 574px; "></iframe>
</div>
Broken:
<div>
<noscript><div class="mas"><div class="pam uiBoxRed">You need Javascript enabled in your browser to use Facebook Applications.</div></div></noscript>
<form action="https://resihop.herokuapp.com/" method="post" target="iframe_canvas_fb_https" id="canvas_iframe_post_4fe8adec0223e0f59580030" onsubmit="return Event.__inlineSubmit(this,event)">
<input type="hidden" autocomplete="off" name="signed_request" value="yx5eMWJ-0WFSOHg5bkfxesurLc5zZcfuYdyuJqffv0M.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImV4cGlyZXMiOjEzNDA2NTQ0MDAsImlzc3VlZF9hdCI6MTM0MDY0ODk0MCwib2F1dGhfdG9rZW4iOiJBQUFGbVR1TlI2UlVCQUJ6NVRxdWRuaW1tN01ZVzRkdXhSMHczTU1zcDZvbU9ZZ3ZZVm1zZG11dVJLN1lEb1h6Mm9TYUFIeUpaQ2NsSjg5cFBFWkJaQ2haQURyMGZCWWIxOUxaQ0o0QnVaQnR3WkRaRCIsInVzZXIiOnsiY291bnRyeSI6InNlIiwibG9jYWxlIjoiZW5fVVMiLCJhZ2UiOnsibWluIjoyMX19LCJ1c2VyX2lkIjoiNjUxNjY2NDgzIn0"></form>
<iframe class="smart_sizing_iframe" frameborder="0" scrolling="yes" id="iframe_canvas" name="iframe_canvas_fb_https" src='javascript:""' height="800" style="height: 294px; "></iframe>
</div>
One difference I have noticed is that the actions are different. I have waited for several hours now, so it might be a server-unsync-thing, but probably not.