add http:// to input box

jrahma

Hi,

I am using the following to let the user enter a url:

<input type="url" name="txtLinkURL" autocomplete="off" required style="width: 400px">

I want to know hot to make the box display http:// so user can't remove it?

Note: I am using PHP and HTML

NogDog

If you want it to be part of the submitted value, then you could put it in the value attribute of the input tag, but the user would be able to overwrite/change it -- which might not be all bad if the URL in question should use https.

jrahma

NogDog;11034549 wrote:
If you want it to be part of the submitted value, then you could put it in the value attribute of the input tag, but the user would be able to overwrite/change it -- which might not be all bad if the URL in question should use https.

then what's the solution?

NogDog

This is what I described, but I don't know if you consider it a solution or not:

<input type="url" name="txtLinkURL" autocomplete="off" required style="width: 400px" [b][color=red]value="http://"[/color][/b] >

dalecosp

You cannot make an input box immutable without making the entire input box immutable:

<input type='url' disabled>

The solution would be to add the "http://" during processing after the form is POSTed.

You could display the "http://" before the input box in order to imply to users that it will be added:

http://<input type="url" name="txtLinkURL" autocomplete="off" required style="width: 400px">

NogDog

<!DOCTYPE html>
<html>
	<head>
		<title>test</title>
		<style type='text/css'>
			.http {
				border: solid 2px gray;
				margin: 0.25em;
				padding: 0.25em;
				overflow: auto;
			}
			.http input {
				border: none;
				margin: 0;
				padding: 0;
			}
		</style>
		<script type='text/javascript'>
			function submit_form(the_form)
			{
				the_form.url.value = 'http://' + the_form.url.value;
				return true;
			}
		</script>
	</head>
	<body>
		<form action='' method='get' onsubmit='submit_form(this);'>
			<div>
				<label>Enter link:
					<span class='http'>http://<input type='text' size='30' name='url' />
					</span>
				</label>
				<input type='submit' value='Submit URL' />
			</div>
		</form>
	</body>
	<?php
		if(isset($_GET['url'])) {
			echo "<pre>".print_r($_GET,1)."</pre>\n";
		}
	?>
</html>

🙂

dalecosp

Teehee! Nice 😉