I have asked a similar question in the past but would like to know if it's possible to link the "textarea" content between the pages as I have thought that this might be a better solution.
I'm new to coding and unfortunately I don't have a good understanding of how to do it on my own.
Any help would be appreciated. I'm not sure if it's even possible.
Page 1
$linked text =
This is the text which
Should be displayed on the second page.
And should be updated automatically
Once I update this text on page 1.
Page 2
<div class="textniz">
<textarea class="two" id="myInput" name="myInput" readonly>
$linked text</textarea>
</div>
It would be nice to know more about your webserver. Sticking to the KISS principle, and using a PHP server as an example, this could be accomplished with POST and an html form like the following:
page1:
<form action="/page2.php" id="usrform">
<input type="submit">
</form>
<textarea name="comment" form="usrform">Enter linked text here...</textarea>
Then with page2.php:
<html>
<body>
<div class="textniz">
<textarea class="two" id="myInput" name="myInput" readonly>
<?php echo $_POST["comment"]; ?><!--This is where page 1 data is retrieved-->
</textarea>
</div>
</body>
</html>
The above will only update page 2 when the user clicks the submit button. For the automatic aspect you could use AJAX JS to send the updated data on each key change. You can take a look at this simple example.
I used PHP for illustrative purposes. The concept you want to implement is really about submitting and retrieving a POST request containing the linked text and is supported by all webserver types. JavaScript will help you accomplish the automatic part.
Related
I need your help with an error that i met. I want my website(eshop) to pass WCAG AA accessibility tests (webaim, achecker, w3validator). Plenty of errors came up and since there isn’t any tool to autofix it, and not temp fix upon loading like UserWay, i am correcting it one by one.
One of the plugins that i used is Contact Forms 7. Before i proceed on the problem, i must mention that i use a theme from envato market called Metro, Elementor, Woocommerce, WPML.
The report of wave.webaim.org found an error in the following page
https://benetialingerie.gr/contact/?lang=en (and in its translation).
The error is:
Missing form label
A form control does not have a corresponding label.
You may find below the code.
<div class=”metro-contact-form” aria-label=”contact form”>
<h3 class=”rtin-title” aria-label=”title area”>Send Us a Message</h3>
<div class=”row” aria-label=”name area”><div class=”col-md-6 form-group”>[text* your-name class:form-control placeholder “Name *”]</div><div class=”col-md-6 form-group”>[email* your-email class:form-control placeholder “Email *”]</div></div>
<div class=”row” aria-label=”subject area”><div class=”col-md-6 form-group”>[text* your-subject class:form-control placeholder “Subject *”]</div><div class=”col-md-6 form-group”>[tel your-phone class:form-control placeholder “Phone”]</div></div>
<div class=”form-group” aria-label=”text area”>[textarea* your-message class:form-control placeholder “Message *”]</div>
<div class=”form-group” aria-label=”Submit button”>[submit “Submit”]</div>
[response]
</div>
As i undestand, the code must have elements. Since i am not familiar in coding and my developing skills are limited, can you please help me out? Any advices?
Thanks in advance.
Nikos
The code you are displaying is the widget code people need to insert in their WordPress pages to render the form.
That is not the actual code generating the forms, as that code is in the PHP files of the plugin itself.
My suggestion is to hire a web dev who can go into those files.
In terms of accessibility you need to make sure that each input field has a label (specifics of this apply).
Bad example, missing label: <input type="text">
Good example: <label for="nameField">Insert name</label><input id="namefield" type="text">
So, you need to have a label and that label also needs to be connected with the actual input field via the for attribute pointing to the id of the input.
Like #Manuel Cheta said you need to wrap your input field with a label tag. For example:
<label for="**your-email**">[text* your-email **id:your-email** placeholder "your email"]</label>
but you also need to add the id of this input field.
Although, Contact form 7 supports HTML directly. So, if you have code like this:
<div>
<p><input name="your-email" aria-label="Your Email" /></p>
<p><input name="your-name" aria-label="Your Name" /></p>
</div>
you could also have aria-label="Email" attribute. That works fine to me too!
I'm building a web application with Symfony , and I want to allow users to post an XML request to remote servers.
I've designed the page with a textarea where they should put the XML code and I was wondering if I can make it colored so they can edit their codes easily .
<div class="form-group">
<textarea rows="20" cols="70" name="request" required="required" class="form-control" placeholder="Put Your SOAP Request here"></textarea>
</div>
Any Idea how to achieve this ?
Take a look at CodeMirror:
http://codemirror.net/
You'll probably have to add some custom Javascript to your textarea field to make it work.
There seems to be a bundle for this, but I'm not sure how reliable it is:
https://packagist.org/packages/nitrado/code-mirror-bundle
Ok so here's my issue with trying to install the reCaptcha. On my basic HTML page I have the following form in the body of the content.
<form action="/cgi-bin/new_forms/form.pl" method="post" name="pledgeform" onSubmit="return validate(this)">
This is where all the form info is
<p><input type="submit" value="Submit"> <input type="reset" value="Clear Form"></p>
</form>
Now I know that I need to place this Google code just above my submit button:
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea>
<input type="hidden" name="recaptcha_response_field"
value="manual_challenge">
</noscript>
My issue is where do I go from here? I know that it needs to verify the reCaptcha but I currently have the form going to a Perl script so I'm confused. Can I have it so that the reCaptcha needs to be correct first in order for the action to go and run the Perl script? I'm not sure if I'm asking this correctly so if anyone needs any other info let me know. I'm stumped and any help would be awesome.
My skill level is basic-intermediate just so you know where I'm coming from
Captcha::reCAPTCHA has documentation on its use.
There is also an example CGI script included in the package.
Basically, yes, you need to stay on the form in order to error check that the captcha was actually filled in correctly, just like with all form error checking.
I have a form which I'd like to post to the same page. The form action contains a fragment identifier for the element on the page that contains it - what I want it to do is post the data, then reload the same page at the same point so the user doesn't need to scroll down.
example index.php:
<div>
some very long content that pushes my form down the page
</div>
<div id="myDiv">
<form action="index.php#myDiv" method="post">
<input name="abc" value="123"/>
<input type="submit" value="submit"/>
</form>
</div>
However I have a couple of problems - firstly I'm not sure if this is good practice and can't find much on what is considered good practice with fragment identifiers.
Second, some others have said that sometimes the form "jumps to the top" when they click submit. I haven't been able to reproduce this yet but it seems pretty obvious that instead of posting the data, the browser is going with the fragment identifier action instead.
Can anyone suggest a better way to do this?
Redirect the user after the form submission using header() function along with identifier.
<div>
some very long content that pushes my form down the page
</div>
/*Use header() to redirect the person on the #point*/
<?php
//form data goes here, if it passes everything then use
header('Location:index.php#myDiv');
exit;
?>
<div id="myDiv">
<form action="index.php" method="post">
<input name="abc" value="123"/>
<input type="submit" value="submit"/>
</form>
</div>
I already posted a similar question and got a jQuery solution that works. Now I want to do it with only CSS/HTML. I saved twitter's homepage locally and deleted all the js scripts and noticed that the effect I'm trying to achieve is with CSS/HTML (when you click on the username/pass the values "Username"/"Password" stay there until you enter text).
I'm a newbie at these kind of new CSS/HTML effects and have spent the last couple of hours trying to replicate it with no success.
Here's the html of twitter's login form:
<form action="#" class="signin" method="post">
<fieldset class="textbox">
<div class="holding username">
<input type="text" id="username" value="" name="session[username_or_email]" title="Username or email" autocomplete="on">
<span class="holder">Username</span>
</div>
<div class="holding password">
<input type="password" id="password" value="" name="session[password]" title="Password">
<span class="holder">Password</span>
</div>
</fieldset>
<fieldset class="subchck">
<label class="remember">
<input type="checkbox" value="1" name="remember_me">
<span>Remember me</span>
</label>
<button type="submit" class="submit button">Sign in</button>
</fieldset>
I've looked over the site's CSS but it's 10,000 lines and very complicated. How should the CSS look like? Or could you point me out to a tutorial on how to achieve the same effect as this is driving me nuts?
Thank you very much,
Cris
Set the HTML autofocus attribute:
<input type="text" placeholder="Type here ..." autofocus="autofocus" />
You can target elements that are focused or blured like so:
input:focus {color:red;}
You now need to nest the CSS to hide the span called holder inside the input.
span.holder input:focus {visibility:hidden;}
I have not tried this, but it would be something like this.
To clarify, I have just pulled the JavaScript twitter use and the source for their home page and I can confirm that they are using the following JavaScript function for focus on the field
inp.focus()
The JavaScript is quite lengthy but it looks like after a quick read that they are using jQuery that is setting focus based on the class being username.
I just looked at the autofocus property suggested by another poster and this method has worked for me in my web app currently under development.
The code for this is
<input type="text" id="username" value="" name="session[username_or_email]" title="Username or email" autocomplete="on" autofocus>
Note, per the documentation at the W3C website, the autofocus property can only be used once on the page. I have put it into a form that is hidden and shown in an inline element using Fancybox.
The grayed out text in the input field can be done with the place-holder element, something I'm already using, add the following into your input element
placeholder="Username"
NOTE: Both placeholder and autofocus are HTML5 properties and may not be supported by all major browsers yet, this is why JavaScript is still being used by sites like twitter.
The styling is done based on CSS/CSS3 greatly, an excellent resource is W3Schools. I would recommend for what you're wanting to achieve start at the CSS3 section looking at borders.
Another resource that is excellent but hasn't been updated for about a month and a half sadly is doctype.tv. Nick has some fantastic advise regarding styling your website along with some great insight into design.
Judging by the bolded text in your question (when you click on the username/pass the values "Username"/"Password" stay there until you enter text), I'm guessing what you want is the placeholder attribute, which #phihag has in his example.
<input type="text" placeholder="This text will disappear" />
The placeholder attribute works without Javascript in browsers that support it. For older browsers, you'll need some Javascript, and this is probably what Twitter is doing in their code.
See the Wufoo page on the Placeholder Attribute for more details, including how to do a javascript fallback and what browsers it is currently supported in.
See also this demo which shows how to style the ":placeholder" and ":active" states (at least for webkit and mozilla).