I have HTML5 form with text box and a submit button,like below
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
and how can I use above html code in drupal??
Well, easiest way for creating forms would be by using webform module. It's easy to use, intuitive, but again powerful:
https://www.drupal.org/project/webform
https://www.drupal.org/docs/8/modules/webform/webform-features
So, my suggestion is to use it and add some CSS if you need to style your form.
Second way, would be by using Drupal's form api. For this you'll have to check on documentation, read some tutorial or similar.Requires some programming skills.
https://www.drupal.org/docs/8/api/form-api/introduction-to-form-api
Third way would be creating totally custom page end-point, where you can literally copy-paste your code as it is:
https://www.drupal.org/docs/8/creating-custom-modules/create-a-custom-page
Related
I have created form using twig template, the form has first name,last name and email.I need to save those values to database.
how can I create new table and store data in it??
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
First name: <input type="text" name="FirstName"><br>
Last name: <input type="text" name="LastName"><br>
Email: <input type="text" name="email" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Can anyone help on that please??
You should use drupal's form api to create the form. Your way is not really "drupalish" way. Then you can define custom content type, with all the fields you need and if form submission handler of your form you can create new nodes in that type with data your form collected.
So google a bit, check some tutorial on form api, and how to make custome form and also on custom content types in drupal. Not that scare as it maybe looks to you right now.
Or, check on webform module that comes with D8 default installation, maybe you can use it instead!
I have a simple form on my main page. It needs to be toggle-able (is that a word?) between the simple version and the detailed version using a button. Where do I put the code for the button, inside or outside the form element? I read online that the submit button should be within the form, so I'm guessing a toggle button should also be there? But I'd rather ask more experienced people. Also, how would I make the forms retain the same content that the user typed when toggleing?
This is for a form I'm making on Wordpress.
I would recommend placing the toggle button outside of the <form> element and then use jQuery (or plain javascript) to handle the switching between the simple and detailed versions of the form. I'm not exactly clear what you had in mind for the simple and detailed versions of the form, but this approach should be easy to adapt to your purposes.
You can give the advanced form fields the same class (e.g. "detailed"), have them hidden by default in your CSS, and then have them appear when the toggle button is clicked using jQuery.
The values inputted into the detailed form fields won't get lost when the button is toggled; the values are still there, but just hidden. They'd still get submitted when the form submit button was clicked.
This is the toggle and <form> code.
<button id="form-toggle">Toggle Detailed Form Fields</button>
<form id="test-form" action="action_page.php">
<p>First name: <input type="text" name="firstname" value=""></p>
<p>Last name: <input type="text" name="lastname" value=""></p>
<p class="detailed">Email: <input type="email" name="email" value=""></p>
<p class="detailed">Phone: <input type="tel" name="phone" value=""></p>
<p><input type="submit" value="Submit"></p>
</form>
This is the CSS you should place in your stylesheet, it makes the detailed form fields hidden by default:
.detailed {
display: none;
}
This is the jQuery code that you could enqueue as an external .js file in your functions.php file or before the </body> of your footer.php file:
<script type="text/javascript">
jQuery(document).ready(function($){
$('#form-toggle').click(function() {
$('.detailed').toggle('fast');
});
});
</script>
I have just create a blank .net web form page and added a simple html form, it reads:
<body>
<form id="form1" runat="server">
<div>
<form method="post" action="2ndpage.aspx">
<input type="text" name="Value" />
<input type="submit" value="click" />
</form>
</div>
</form>
</body>
If I click the button I'm not taken to 2ndpage.aspx. But If I add "<form></form>" just after the <div> so that the body now reads:
<body>
<form id="form1" runat="server">
<div>
<form></form>
<form method="post" action="2ndpage.aspx">
<input type="text" name="Value" />
<input type="submit" value="click" />
</form>
</div>
</form>
</body>
it works and I'm taken to 2ndpage.aspx when click.
I can look at this for another month but I'm sure I couldn't see where the bug is, I'd need a pair of fresh eyes.
Any ideas?
Thanks
you cant place form inside another form!
There's a good article here - https://web.archive.org/web/20170420110433/http://anderwald.info/internet/nesting-form-tags-in-xhtml/
It discusses not being able to nest one form in another form and also deals specifically with the scenario you describe.
You can't have nested form tags.
I'm not quite sure why it works when you add another empty form tag. But my guess is that the parser simply ignores the start of the tag and sees the end tag as the end tag for the first form. And therefore doesn't see it as nested forms anymore.
I was provided the following code to integrate into my ASP.NET WebForms page:
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
<div>
<input type="hidden" name="cx" value="partner-pub-8127518365728966:9snx3s9v6fx" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="25" /><br />
<input type="submit" name="sa" value="Search" class="formoutput"/>
</div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
However, I'm not sure how to do this because of the extra form element that this poses. Has somebody translated this to work with ASP.NET WebForms previously, and if so can you help me out?
Thanks!
Take a look here: http://am22tech.com/s/22/Blogs/post/2010/05/26/How-can-I-add-Google-search-box-to-my-website-on-master-page-with-aspnet.aspx
It's a bit of a hack but the idea is to do the following:
Place the search box in a separate HTML page
Modify the Target and Action properties of the form
Add an iFrame to your main page with the source of the above HTML page
The article is pretty detailed and, if you don't mind using an iFrame, then it should answer your question.
Update
Scott Mitchell has posted a very detailed article that does not use iFrames. It looks like more work to implement but may be the better choice.
URL: http://dotnetslackers.com/articles/aspnet/Implementing-Search-in-ASP-NET-with-Google-Custom-Search.aspx
I'm trying to put the following Google generated search box code into a Master page on a site:
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-xxxxxxxxxx:u3qsil-l6ut" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
The problem, I believe, is something to do with the form tags. I've tried putting this code inside a user control and embedding that in the master page but no luck yet...
Do you by any chance have a "form runat=server" wrapping around where your user control is being placed?
That would cause a problem.
ASP.NET likes to enclose the entire page with a Form tag, and you can't nest form tags...So move it outside of the <form runat="Server"> tag and you'll be fine.