I have an Angular 14 app where I display some content. There is a button to put this into "edit mode" wherein I hide the content and show a form. When the user edits the form and clicks "done", the form is hidden and the updated content shows.
This works fine, but I am trying to make this accessible. I added an aria-live to the part with the form and when it is shown the entire form is read out loud using VoiceOver on Mac, but you don't know it's a form. You can tab to the fields and edit the form, though, and then click Done and the form goes away.
However, how do I let unsighted users know that (1) a form has appeared and then (2) the form have disappeared and the regular content has re-appeared?
I have made a stripped down Stackblitz to illustrate.
It's basically this HTML:
<div class="container">
<div class="row">
<div class="col">
<div *ngIf="!showForm" aria-live="polite">
<h1>
Hello {{ myForm.controls.fname.value }}
{{ myForm.controls.lname.value }}
</h1>
<button class="btn btn-secondary" type="button" (click)="onEditForm()">
Edit Greeting
</button>
</div>
<form [formGroup]="myForm" *ngIf="showForm" aria-live="polite">
<h3 class="sr-only">Edit Greeting Form</h3>
<div class="form-group mb-4">
<label for="fname">First Name</label>
<input
type="text"
id="fname"
formControlName="fname"
class="form-control"
/>
</div>
<div class="form-group mb-4">
<label for="lname">Last Name</label>
<input
type="text"
id="lname"
formControlName="lname"
class="form-control"
/>
</div>
<button type="button" class="btn btn-primary" (click)="onDoneForm()">
DONE
</button>
</form>
</div>
</div>
</div>
ARIA live regions aren't well suited for elements containing a lot of text or other things. The screen reader will read them all at once, and, for long things, it's rarely the best thing to do because the user can't interrupt or pause the read, or if he/she does it, the rest is kind of lost.
A much better thing to do for forms is to put the focus on the first input field. The first label will be read as well as the field type, and so the user will know that he/she has to enter some information, and then will press tab to go to the next field, and so on.
Additionally to that, you can use ARIA live, but not on the form or content shown itself. The best use of ARIA live is for displaying short strings saying "The form is shown", "Content is loading", "Your request has been submitted", "There are 12 search results", etc.
Related
I have a question about having two submit buttons on a single form (the two buttons are below). I currently have two buttons, one to submit the login data and attempt to validate the login by running a database query, and the other to bring the user to a page to generate a random string and set it as their new password.
I want to be able to make it so that when I hit enter, the second button (the login process button) is triggered, where it is currently the initial button that is done. I have tried turning the first button from an input to a normal button tag, but the issue still persists. Brief snippet of the buttons below, if the full form would be helpful I can edit it in.
I tried some solutions I found online such as this, but I couldn't get it working - maybe I'm just a bit stupid!
Any and all help is fully appreciated. Thanks in advance.
<div class="column">
<div class="field">
<p class="control">
<!-- if clicked, brings user to reset password-->
<input type='submit' class="button is-danger" id='loginRequest' value="Forgot Password" formaction="resetpassword.php">
</p>
</div>
</div>
<div class="column">
<div class="field">
<p class="control">
<!-- if clicked, posts info and attempts to validate login through database-->
<input type='submit' class="button is-primary" id='loginRequest' value="Login" name="requestlogin">
</p>
</div>
</div>
Disclaimer: I’m a backend programmer and I would like to minimize javascript code in my webpages.
I’m considering using the login form given here as example. In this example we have this
<form class="ui large form">
<div class="ui stacked segment">
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" name="email" placeholder="E-mail address">
</div>
</div>
<div class="field">
<div class="ui left icon input">
<i class="lock icon"></i>
<input type="password" name="password" placeholder="Password">
</div>
</div>
<div class="ui fluid large teal submit button">Login</div>
</div>
<div class="ui error message"></div>
</form>
The login button is just a div which does nothing. There is no action argument in the form tag and there is no submit type input tag.
How do I get the page to send the input field values back to the backend server ?
Note that there is some javascript code visible in the source page that checks the validity of the fields. But there is no hint on how to get send the email and password to the backend and load the logged in page.
The login button is just a div which does nothing
Make it a <button>.
There is no action argument in the form tag
Add one if you want the data to be submitted to a different URL then that of the current page.
Your form should also be method="POST". Passwords do not belong in URLs (which are often logged in plain text).
How do I get the page to send the input field values back to the backend server ?
Use a <button> element to represent your submit button and not a <div> element. The <div> element is when you need a block element and HTML lacks an element with the semantics to describe your content. That isn't the case here, you want to submit a form and that is what submit buttons are for.
I'm creating a new website for my company using mobirise. The mobirise templates come with predesigned email forms that were created using formoid. When a user uses the email form to send an email the information is sent to formoid and then formoid sends the information to me at my email address. All of the coding in the email form is behind the scenes, so I can't actually see what it's doing.
On one of my forms I need to have the page redirect to another page where users will be able to upload a file to my server using another script. I have contacted mobirise to ask them if they could tell me how to redirect after the user clicks the submit button, but they said I had to contact formoid. So far I haven't gotten a response back from formoid so I thought I would try to look for a solution on my own.
I have tried adding javascript code to the coding on the page, but as I said, most of the coding of the form is somewhere behind the scenes and I can't figure out exactly which coding is performing the form's submit action.
What I was hoping for is a suggestion about how I could add some additional JavaScript coding that would watch for the submit button in the form being clicked and then redirect the page. I'm not positive this is even possible, but I figured that if anyone would be helpful it would be the people who post solutions here. I'm rather new to JavaScript, so I'm not sure where to start and I don't want to experiment for hours and hours and get frustrated because nothing is working.
So, if anyone can give me an idea here I would greatly appreciate it. Below is the coding for the form in case it helps:
<div data-form-alert="true">
<div hidden="" data-form-alert-success="true" class="alert alert-form alert-success text-xs-center">Thanks for uploading your audio file!</div>
</div>
<form action="https://mobirise.com/" method="post" data-form-title="FTP Upload">
<input type="hidden" value="NTcF3QgiRzQHgm5xv+UnYlBBGPR27Q6NZwj5EPuecwUNxuL8vndMlaaoM2PpzlkXlNaFBrtr2mU+CfZxfef01mKMpaQkezUMhyWXZgieem0/pt/V/nU0iUetLNqsEpj7" data-form-email="true">
<div class="row row-sm-offset">
<div class="col-xs-12 col-md-4">
<div class="form-group">
<label class="form-control-label" for="form1-3o-name">Name<span class="form-asterisk">*</span></label>
<input type="text" class="form-control" name="name" required="" data-form-field="Name" id="form1-3o-name">
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="form-group">
<label class="form-control-label" for="form1-3o-email">Email<span class="form-asterisk">*</span></label>
<input type="email" class="form-control" name="email" required="" data-form-field="Email" id="form1-3o-email">
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="form-group">
<label class="form-control-label" for="form1-3o-phone">Phone</label>
<input type="tel" class="form-control" name="phone" data-form-field="Phone" id="form1-3o-phone">
</div>
</div>
</div>
<div class="form-group">
<label class="form-control-label" for="form1-3o-message">One or more files are being uploaded to the WORDsmart server. </label>
<textarea class="form-control" name="message" rows="7" data-form-field="Message" id="form1-3o-message"></textarea>
</div>
<div><button type="submit" class="btn btn-info">CONTACT US</button></div>
</form>
in this case, I would recommend you to use another form. As far as I know form wouldn't work if you would bring any changes to form of Mobirise. Just use another form creator and implement it manually to Mobirise's project after publication to the local folder (the project of Mobirise).
You can read tutorial about publishing here: https://mobirise.com/help/local-host-369.html
Just change the action field in the first line of the form, to the page were you would like to send the data.
The next hidden input line with the public key may be deleted also.
I am developing a mobile application with jquery mobile, php ,phonegap and cordova
I have a requirement that in the virtual keyboard of all form elements like Text boxes should have next and previous buttons and for the last text box the Done/Go/Enter option should be shown.
How can I handle those buttons programatically without adding plugins.
Here is my form
<form id="loginForm" name="form1">
<div class="row mainpart paddingleftandright clsfieldPadding">
<div class="col-lg-12">
<div class="input-group1" id="email_div">
<input type="email" id="login_form_email"
placeholder="EMAIL ADDRESS" value="" data-clear-btn="true"
data-mini="true" tabindex='1' class="clsPyType clsBodyTxt" autocapitalize="off" onBlur="getPasswordProtectionStatus(this.value);checkLoginEmail(this.value);">
<span class="input-group-addon"><span class="glyphicon" style='display:none;' id="glyphicon_id1">!</span></span>
</div>
</div>
</div>
<div id="login_form_email_msg" class="clsPyType"></div>
<div class="row mainpart paddingleftandright clsfieldPadding2">
<div class="col-lg-12">
<div class="input-group1" id="password_div">
<input type="password" id="login_form_password"
placeholder="PASSWORD" value="" data-clear-btn="true"
autocomplete="off" data-mini="true" tabindex='2' class="clsPyType clsBodyTxt" onBlur="checkLoginPassword(this.value);">
<span class="input-group-addon"><span class="glyphicon" style='display:none;' id="glyphicon_id2">!</span></span>
</div>
</div>
</div>
<div id="login_form_password_msg" class="clsPyType"></div>
<div class="row mainpart paddingleftandright">
<div class="col-lg-12 remember-me">
<select name="slider" data-role="slider" id="rememberMe">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div class="col-sm-5 clsPyTypeUprBold Clsremember">Remember Login</div>
</div>
</div>
<div class="row mainpart paddingleftandright">
<div class="col-lg-12">
<!-- <a data-role="button" data-transition="flip"
data-direction="reverse" class="clsBtnHead2 clsBtnRed" id="login_form_submit" onClick="login_form_submit();"><div class="clsBtnTop">LOGIN</div></a> -->
<input type="submit" tabindex='3' id="login_form_submit" class="clsBtnHead2 clsBtnRed" onfocus=" $(this).trigger('click');" value="LOGIN"/>
</div>
</div>
If any one have better ideas please share
All of the fields within a form will have the prev / next buttons which act like tabs do on a real keyboard. The done/Go/enter buttons... well they will naturally occur if there is data to submit. I think this just boils down to semantics and building your form correctly.
In the screen shot, the first field is focused, the next button is available (chevron pointing to the right) and the form is able to be submitted via the GO button. It can be submitted as for all the device knows this form is complete, your validation will decide whether or not the data is complete. What I am getting at here is that you won't be able to hide the return/Go button at will. However you can omit it using a numerical keypad.
The 'done' message occurs above the virtual keyboard and does not submit (unless you submit on blur, as using it blurs whatever field you were focusing on), and looks like a text link.
The 'Enter' & 'Go' buttons will submit the form. So if the last field in your form is numerical (big finger buttons) then you won;t be able to use it for submission unless you submit the form on blur of that field.
Here is a working example: http://codepen.io/morganfeeney/pen/ojdRMQ
I built that to test virtual keyboards on handheld devices. Go and check it out on your iPhone ;)
FYI: the example code you supplied does not have a closing </form> tag.
I am currently editing a script I had made for me some time back. I no longer have contacts for the original coder due to no longer using Yahoo messenger.
On my contact form it uses the onclick="$('#contact-form').submit()" function.
I am trying to get the contact form the submit but when I complete the form and click "Apply" it will not submit, My guess is down to the Javascript validating some of the fields that I have changed or deleted. Is there a way I can get round this? I have removed the onclick function however it will not submit when I try to complete the form.
Here is my form heading:
<div id="contact-form" class="box1 form css3" xmlns:pageScript="urn:pageScript">
<a name="loanform"></a>
<form action="thankyou.php" method="post" id="contact-form">
<fieldset class="loan">
<legend><span>1 - Your Details</span></legend>
<ol class="group" data-role="listview">
<li class="clearfix" id="ValItem">
<label for="Val" id="ValCheck">Amount</label>
And for the bottom of the form as the form has a fair few fields...
<fieldset class="submit" style="height:0;overflow:hidden">
<ol class="group" data-role="none">
<li></li>
</ol>
</fieldset>
<div id="warning-box">
<p>By pressing the APPLY button below you agree to our Terms and Conditions.</p>
</div>
<div class="full-width clearfix">
<div id="previousButton" class="prev-button"><img class="full-width prev-desktop" src="back-button.png" border="0"/><img class="full-width prev-mobile" src="back-button.png" border="0"/></div>
<div id="nextButton" class="next-button"><img class="full-width next-desktop" src="next-button.png" border="0"/><img class="full-width next-mobile" src="next-button.png" border="0"/></div>
<div id="SendEnquiry" name="SendEnquiry" onclick="$('#contact-form').submit()" class="apply-button"><img class="full-width apply-desktop" src="apply-button.png" border="0"/><img class="full-width apply-mobile" src="apply-button.png" border="0"/></div>
</div>
</form>
<button id="popButton" style="display:none">x</button>
</div>
I do not get any error messaged displayed, When you click the Apply button it does not seem to do anything. I have no objection as to how the form can be submit, I am really just looking for a way round it to make sure clients are able to submit there request.
As you said "I have no objection as to how the form can be submit, I am really just looking for a way round it to make sure clients are able to submit there request.", You can also sumbit as below.
Just write this line above </form> tag.
<input type="submit" value="SUBMIT"/>
This line will add new button in your page. You can replace it with your old button's css.
This way is very simple and you do not need to include jquery in your html page.