i'm creating two html pages : update and index
in update page:
i want to create a button CHOOSE FILE to choose an image.
and another button SAVE to insert the image file in index page.
how can i create these two button.
<div class="slides">
<li data-bg-image="images/slides/img1.jpg">
<div class="container">
<div class="slide-content">
<!--<small class="slide-sub and for the button
<button type="button" onclick="chooseFile();">choose file</button>
<textarea id="textarea1" rows="1" cols="10"></textarea>
<div style="height:0px;overflow:hidden">
<input type="file" id="fileInput" name="fileInput" onchange="this.form.filename.value = this.value"/>
</div
You should implement input and submit template for input is :
<input accept="file_extension|audio/*|video/*|image/*|media_type">
For example:
<form action="/upload_image.php">
<input type="file" name="pic" accept="image/*">
<input type="submit">
</form>
Related
I found xhtml that looks like this:
<div class="mail_area">
<div class="mail">
<div class="mail_lef"></div>
<div class="mail_cen">
<form action="">
<input type="text" value="Enter your E-mail for instant
access..." name="Enter your E-mail" class="txtinput" onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue"/>
</form>
</div>
<div class="mail_rig"></div>
</div>
</div>
<div class="arrow_area">
<div class="left_arr"></div>
<div class="cen_but">
<span class="cen_text"><sup class="red">*</sup>We value your privacy and would never share your information.</span>
<form action="">
<input type="button" class="button" name="submit" align="middle"/>
</form>
</div>
<div class="rig_arr"></div>
</div>
In the first form I am going to add a method and an action.
It looks as though the second form was created this way so it could be lined up with other images.
So my question is, how can I setup the button in the second for to use the input information and get access to the action attribute of the first form?
Thanks for the help.
The easiest way to do this would be to turn this into one form instead of two. Otherwise you would have to use javascript.
<form action="">
<div class="mail_area">
<div class="mail">
<div class="mail_lef"></div>
<div class="mail_cen">
<input type="text" value="Enter your E-mail for instant access..." name="Enter your E-mail" class="txtinput" />
</form>
</div>
<div class="mail_rig"></div>
</div>
</div>
<div class="arrow_area">
<div class="left_arr"></div>
<div class="cen_but">
<span class="cen_text"><sup class="red">*</sup>We value your privacy and would never share your information.</span><br>
<input type="submit" class="button" name="submit" align="middle"/>
</div>
<div class="rig_arr"></div>
</div>
</form>
In order to override a <form> submitting data with the button you must:
A. Assign an id to the first form (in demo #form1)
B. Add the following attributes to the button:
Replace type="button" with type="submit"
Add formmethod="post" (or get)
Add formaction="https://httpbin.org/post" (The value is a live test server)
Add form="form1" (The value is the id of the targeted <form>)
Demo
This demo submits to a live test server, look for the form data in the JSON sent as the response to verify that it works
<div class="mail_area">
<div class="mail">
<div class="mail_lef"></div>
<div class="mail_cen">
<form id='form1' action="">
<input type="text" value="Enter your E-mail for instant access..." name="Enter your E-mail" class="txtinput" onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue" />
</form>
</div>
<div class="mail_rig"></div>
</div>
</div>
<div class="arrow_area">
<div class="left_arr"></div>
<div class="cen_but">
<span class="cen_text"><sup class="red">*</sup>We value your privacy and would never share your information.</span>
<form action="">
<input type="submit" class="button" name="submit" formmethod="post" formaction="https://httpbin.org/post" form="form1">
</form>
</div>
<div class="rig_arr"></div>
</div>
Here is my upload form
<div class="view-form">
<input type="hidden" name="MAX_FILE_SIZE" value="<?=maxFileSize?>"/>
<input name="files" id="files" type="file" class="ui input-file" style="position:absolute;left:380px;top:200px;"/>
<input id="submit_btn" type="submit" value="Upload" class="ui-button-orange input-btn"; onclick="upload();" style="position:absolute;left:380px;top:300px;width:350px;height:70px;font-size:30px;font-family:arial;font-weight:bold;"/>
<iframe name="iframe" style="display:none;"></iframe>
</div>
The text 'Upload' which is on the button makes it so that most of the button can't be clicked, only the edges where there isn't any text. Anyone know how I can fix this? Thanks
I am experiencing a issue detecting if the submit button was clicked. I was give the following form by a CSS designer:
<form action="" method="post">
<div class="form-group">
<label>Username</label>
<input name="username" type="text" class="form-control span12">
</div>
<div class="form-group">
<label>Password</label>
<input name="password" type="password" class="form-controlspan12 form-control">
</div>
Sign In
<div class="clearfix"></div>
</form>
I would like submit the captured information by clicking on the Sign In CSS button. I am used to the usual:
<input type="Submit" value="Sign-In>
button, but not this is different, I am stuck. Any assistance will be appreciated.
try to change
Sign In
with
<button type="submit" class="btn btn-primary pull-right">Sign In</button>
Furthermore you need to set an action attribute on your form element
Give your form and ID = "myform" And try below:
Sign In
There is a simple form in my website
<form>
<input type="textbox" class="Name">
--------------
<input type="submit" class="Button" value="Update">
</form>
I have to insert an image along with the text "Update" in the submit button.(without using a background-image property)
Use <button> like so :
<button type="submit"><img src="your/path" />Update</button>
I am using a template, the name is Treble One Page Rsponsive Theme from Wrapbootstrap which uses Twitter Bootstrap. I am implementing the template and encountered this small error which drove me crazy.
There is a search bar, consists of <input> tag and <button> tag. Previously it was fine, until I make it inside a <form>, the search bar started to act weird. The <input> field is centered, but the <button> appended into outside the field making the whole things uncentered.
Here is the image, to be clear:
picture
And here is my code:
<div class="row">
<div class="span8 offset2">
<div class="input-append">
<form method="get">
<input class="span5" id="appendedInputButton" type="text" placeholder="Search By Name" name="searchTerm" value="Search">
<button class="btn btn-primary sicon-search sicon-white" type="submit"><i>Search</i></button>
</form>
</div>
</div>
</div>
I've googled this template.
This code works on original template as expected:
<div class="row">
<div class="span8 offset2">
<form class="input-append" method="get">
<input class="span5" id="appendedInputButton" type="text" placeholder="Search By Name" name="searchTerm" value="Search" />
<button class="btn btn-primary sicon-search sicon-white" type="submit"><i>Search</i></button>
</form>
</div>
</div>
Main idea is to convert "input-append" div into form, instead of adding new form element within it.