HTML file input, name in the input - html

I'm working on an upload option, now I'm working on the lay-out of my file input. What I want to make is an input where the filename changes with the browse of the file input.
Code Now
<form action="" method="post" enctype="multipart/form-data">
<label for="file">Filename:</label><input type="file" name="file" id="file"><br>
<input class="btn btn-success btn-block uploadform" type="submit" name="submit" value="Submit">
</form>
What I get now
https://scrshot.eu/s/4a157f9.png
What I want to get
https://scrshot.eu/s/b73c306.png
- It has to be still clickable
Does somebody has an idea how to do this?
Thanks.

I found the answer, thank you all
data-filename-placement="inside"

Related

"action_page.php" in form error leads to Error 404

I want to create a form in HTML and I am leading it to the demo page, "action_page.php". When I press "Submit" it shows Error 404.
I tried changing the attribute up and down but it is still saying Error 404. Is this the right demo link? I double-checked. Can someone show how to fix this and some steps on what to do?
Here is the code I have put to make it clear to you:
<form action="action_page.php"
<input type="submit" value="Submit Survey"
</form>
In conclusion, how can I make the demo link "action_page.php" work? (HTML Answer)
<form action="action_page.php">
<input type="submit" value="Submit Survey">
</form>
Your code must be like that:
<form action="action_page.php" method="GET">
<input type="submit" value="Submit Survey">
</form>

Angular 5 simple form with Action is not working

The code given below is not working in my angular html file but if i use this code individually in an html file it works i don't know what i am doing wrong this is just a simple form .
<form action='https://easypaystg.easypaisa.com.pk/easypay/Index.jsf' method='post'>
<input name='storeId' value='4950'>
<input name='amount' value='1000'>
<input name='postBackURL' value='https://easypaystg.easypaisa.com.pk/easypay/Confirm.jsf'>
<input name='orderRefNum' value='123113'>
<input name='merchantHashedReq' value='6ohsP8x3PpiaI4oNirWGwjVkyMLP4CbzcH6pZwvu9SViOzx9nLxyR/TtJhwFrxBU686Wf1z22G+TBxuo5QkSscuXp266qQWx8AbGWnLXxG79LHt+5VlD+lH2JkjKO997adwVHH6mGNm8ldtAKkRyf/E92QF5PwhWMjq8i4dlbABIjJxnwPS3x13R/Nbfmlugkz7XpX20DmZ0IhPuGBR95sOpDATIjfW51fuStCVVni4='>
<input name='autoRedirect' value='0'>
<input name='paymentMethod' value='CC_PAYMENT_METHOD'>
<input name='emailAddr' value='johndoe#live.com'>
<input name='mobileNum' value='0123455500'>
<button type="submit" class="btn btn-success" >Submit</button>
<input type='submit' value='asdasd' class="btn">
</form>
You can do it in following way:
<form #form action='https://easypaystg.easypaisa.com.pk/easypay/Index.jsf' method='post'>
...
<button type="submit" class="btn btn-success" (click)="form.submit()">Submit</button>
...
</form>
Use the ngNoForm attribute as documented. This will prevent all "magic" Angular behavior, and you will be able to submit the form in the native way (with page reload).
So something similar to:
<form ngNoForm action='https://easypaystg.easypaisa.com.pk/easypay/Index.jsf' method='post'>
<input name='storeId' value='4950'>
...
<input type='submit' value='asdasd' class="btn">
</form>
Posting a form directly causes a page reload, that's usually not what you want in an Angular application (SPA). Grab the data from the form and send an HTTP request from your code to the server instead.
You should leverage the NgSubmit directive, as described here

Sending an email using HTML form

Here is my code.
<form action="MAILTO:example#gmail.com " method="post" enctype="text/file">
A3 or A4:<br>
<input type="text" name="A3 or A4"><br>
Add image:<br>
<input type="file" name="image"><br>
<input type="button" id=" value="click">
</form>
Issue: After Clicking the submit button or in this case just the button, nothing happens. I am currently using gmail so if you could please help.
First, a button of input type="button" will not prompt the POST action. You should be using a submit button:
<input type="submit" value="click"/>
Second, form action="MAILTO: " should be form action="mailto:someone#example.com".
A simple example perhaps could provide some insights. Yet, as you mentioned Gmail usage, I suggested reading Gmail API Guides in which examples of various languages are provided.
The button should have type="submit"
<form action="mailto:" enctype="text/file" method="post">
A3 or A4:<br>
<input name="A3 or A4" type="text"><br>
Add image:<br>
<input name="image" type="file"><br>
<input type="submit" value="Send">
</form>

HTML Form File Uploads doesn't upload file

Files doesn't get uploaded though all back-end code is correct. I tested the back end code with another front-end styled code and it worked fine.
but in my front end code it doesn't upload any files. I removed all css and scripts as well to figure out the issue.
here is my simple front end HTML form :
<form action="upload_handler.php" method="post">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload" name="submit">
</form>
you forgot to mention the enctype="multipart/form-data"
<form action="upload_handler.php" enctype="multipart/form-data" method="post">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload" name="submit">
</form>
The issue is with the attributes in your <form> tag. To successfully enable files to be uploaded properly in HTML, following requirements should be there.
Make sure that the form uses method="post"
The form also needs the following attribute: enctype="multipart/form-data".
It specifies which content-type to use when submitting the form
So just add this enctype="multipart/form-data" part inside your <form> tag.

Html button with id and type

How can I do this. I want that my button have ID and TYPE attributs.. is that posible?
<input name="proccess" type="submit" class="invisible" value="1" />
<button id="send-form" TYPE="SUBMIT" class="btn btn-primary top-margin">PoĊĦalji</button>
FIDDLE
And if it is not possible what can i do to create that.
Yes, you can have an id and type attributes.
You should be able to do that, see http://www.w3schools.com/tags/tag_button.asp and http://www.w3schools.com/tags/ref_standardattributes.asp
You have not included .js file in ur fiddle & Try the following :-
<form action="demo_form.asp" method="post">