Send image in value html - html

I am trying to mess with a message people get on their phones on this website and I want to send a image
I want to put a image in the value part of the code (Sorry if I'm using incorrect terms I am fairly new to html)
<input id="text" class="text" value="I want the image here" placeholder="Type your message here" autofocus="">

You can only link to the image in the text input so the value will be the location of the image.
<input type="text" value="www.website.com/image.gif">
If you want them to type into the text field the value will change to whatever they type into the field.
You also get an actual image input type
<input type="image" src="img.gif" alt="image">

Related

Converting HTML page that takes input image to one that takes text

I have a reference HTML page that takes an image as input.
https://gist.github.com/nikhilno1/353b4c9ee0ef9a18d244a514b526fb28
I want to convert it to take input as a text field instead. I want to keep the 'Analyze' button.
Simple stuff actually but I am not a UI guy.
I tried with this:
<form action="{{ url_for('analyze') }}" method="post">
<input type="text" name="analyzeText">
<input type="submit">
</form>
Where I am using the submit button but it is returning "Not Found" with the URL being:
http://xx.xx.xx.xx:8000/%7B%7B%20url_for('analyze')%20%7D%7D

Changing an input button to an image (alt text not showing) HTML

I'm trying to swap out all my default submit buttons to image submit buttons. However, when I do this it still functions fine but there seems to be not text over the image like the value="Login" on the default button so my I was trying alt="Login" but it simply wasn't appearing. Anyone know why this is?
<form method="post" action="index.php">
<div id="userNameLoginDiv">
<p>Username:</p>
<input type="text" name="username" size="12">
</div>
<div id="userPasswordLoginDiv">
<p>Password:</p>
<input type="password" name="password" size="12">
</div>
<div id="loginBtnDiv">
<input type="image" src="IMAGES/button.png" alt="Login">
</div>
</form>
Because image inputs are server side image maps. They are designed to let the user pick a point on the image and send its coordinates to the server. The image itself is the information to be shown to the user, not some text.
The alt text is only shown if the image cannot be (e.g. if the URL to it is a 404 error or if the visitor makes use of screen reader software).
If you want a background image on a submit button, then use a submit button and set the background-image CSS property. (You may also want to set border, padding, et al).

HTML Text Field Input ID and utilization

I have a text box
<p> <input type="text" name="name1" id="usethisid" maxlength="100" value=" <p>
Whatever text is in that field is then the ID right? When i tried taking usethisid and putting it elsewhere just to display whatever the user typed didn't work.
Simply, user should enter something in text field press ok button and then the ID should be saved to whatever user wrote so i can use that ID to display anywhere on the site.
Using PHP $_POST in this code - name1 is not displayed
<ul class="list-group">
<li class="list-group-item">
<span class="badge">1549pts</span>
$_POST["name1"]; //name1should be displayed
</li>
</ul>
The id attribute in an HTML tag is used to identify the tag in a more general manner, whereas the name attribute is used to process requests (get and post for example)
Depending on how are you processing your form you can use either of them.
For example if you want to retrieve the content of your text input using javascript you can use
document.getElementById("usethisid").value
I made this jsfiddle to exemplify.
However if you are using a PHP form submission you'll want to use the name attribute instead of id, and the content of your input can be retrieved by doing: $_POST["name1"];
In PHP you can try this:
In your HTML file, try the following:
<p>
<form method="post" action="something.php">
<input type="text" name="name1" id="usethisid" maxlength="100" value="some default text />
<input type="submit" value="send!" />
</form>
</p>
Then make a php file called "something.php" (noticed that I referenced it in the form tag) with the following line:
echo($_POST['name1']);
This should display whatever was written in the text input.
By the way whenever you want to print a PHP variable name in HTML the correct syntax is
<?php echo($your_variable_name); ?>
instead of just writing $your_variable_name as is, otherwise HTML will just interpret it as a text.

how do i add permanent place holder inside input filed

i need to add font-icon inside input field so i used this method
<input type="text" name="your name" placeholder=" YOUR NAME" style="font-family:Flaticon" class="restrict">
as you see placeholder=" YOUR NAME" this  display font-icon but my problem is when user types some text place holder disapper so i need font icon to be placed permanent inside input field like <lable>
can someone help me
You can't. What do you expect it to look like? placeholder disappears by design.
If you want to prefix an icon in front of your input field, put them together in a container, give this container the needed style and put there your icon and your input-tag. That's the way, how bootstrap your problem solves.
Shortened example:
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
Of course, you need CSS.

Upload image by directly entering a image URL?

I have used a input file code to upload image to my wallpaper site..
<input type="file" name="img" id="img" />
Is there anyway to select a image without selecting image file..like entering URL to text box?
<input name="img" type="text" id="img" value="http://www.somesite.com/image.my.jpg" size="40" />
I tried its not working...please help me! Anyway to enter image url to text box except select browse button and selecting image file? help me i tries in different ways...
You will need to add support for this on 'somesite.com'. This is not something you can solve with HTML, it needs to be solved on the server-side.