I recently downloaded a template to be used for login/signup on my page and am trying to figure out a class that can wrap up the upload button(font awesome icon) and the select file input control for an image.
Here is my code...
<html>
<head>
<--//Bootstrap support plugins->
</head>
<body>
<div class="wthree-form bg">
<div class="agileits-2">
<h2>Sign Up Here</h2>
</div>
<form action="signup.php" enctype="multipart/form-data" method="post">
<--These classes make the form look real good by wrapping up the font awesome icon with an input field->
<div class="w3-user">
<span><i class="fa fa-user-o"></i></span>
<input type="text" name="Username" placeholder="Username" required="">
</div>
<--Here is my problem->
<div class="w3-? ">
<span><i class="fa fa-upload"></i></span>
<input type="file" name="fileToUpload">
</div>
<form>
</div>
</body>
</html>
The question mark above is what needs a class to make the form wrap the upload icon together with a classy select file control to make it look good thanks...
The other wrap controls work perfectly well
I'm not sure that this will fix your problem, but it looks like you need to change your second form tag to a closing form tag.
change
<div class="w3-? ">
<span><i class="fa fa-upload"></i></span>
<input type="file" name="fileToUpload">
</div>
<form>
</div>
</body>
</html>
to
<div class="w3-? ">
<span><i class="fa fa-upload"></i></span>
<input type="file" name="fileToUpload">
</div>
</form>
</div>
</body>
</html>
Related
I am working on a project where one of the parts i am creating a "contact us" section, where it includes general information like, address, gmail, telephone number, and a different part of it is an actual form where you can type in the information. I tend to rely alot on the "div" tag even though it is not semantic. I want to clean up my code and some how replace as many of these divs as possible with more semantic tags. I have tried to search up tags to somehow replace the divs i have, but can not find tags that i can replace them with.
This is a screenshot of the footer for some context
https://imgur.com/9W45JU5
<footer>
<section class="contact">
<div class="content">
<h2>Contact Us</h2>
<p>
If you ever want to get in contact with us, or ask us
a question, do not hesitate to send us a message using
the form below!
</p>
</div>
<div class="container">
<div class="contactInfo">
<div class="box">
<div class="icon"><i class="fas fa-map-marker-alt"></i></div>
<div class="text">
<h3>Address</h3>
<p>5263 Fantasy Kebab Road, <br>Bergen, Norway, <br>55060</p>
</div>
</div>
<div class="box">
<div class="icon"><i class="fas fa-phone"></i></div>
<div class="text">
<h3>Phone</h3>
<p>21-666-9112</p>
</div>
</div>
<div class="box">
<div class="icon"><i class="far fa-envelope"></i></div>
<div class="text">
<h3>Email</h3>
<p>bigemail#gmail.com</p>
</div>
</div>
</div>
<form class="contactForm">
<h2>Send Message</h2>
<div class="inputBox">
<input type="text" name="full_name" required="required">
<span>Full Name</span>
</div>
<div class="inputBox">
<input type="text" name="email" required="required">
<span>Email</span>
</div>
<div class="inputBox">
<textarea required="required"></textarea>
<span>Type your Message...</span>
</div>
<div class="inputBox">
<input type="submit" name="submit_button" value="Send">
</div>
</form>
</div>
</section>
</footer>
You should definitely replace the divs that wrap your inputs with labels.
Without labels, this is how your input fields will be read a screen reader (in these examples, I'm using Voiceover). Notice how the input is not described as Full Name, or anything meaningful for the user to know what should go into this input.
label {
display: block;
}
<footer>
<section class="contact">
<form class="contactForm">
<h2>Send Message</h2>
<label class="inputBox">
<input type="text" name="full_name" required="required">
<span>Full Name</span>
</label>
<label class="inputBox">
<input type="text" name="email" required="required">
<span>Email</span>
</label>
<label class="inputBox">
<textarea required="required"></textarea>
<span>Your Message</span>
</label>
<div class="inputBox">
<input type="submit" name="submit_button" value="Send">
</div>
</form>
</section>
</footer>
With a label element, the screen reader has a way to describe the field by the text that is inside the label -- Full Name.
The <address> HTML element indicates that the enclosed HTML provides contact information for a person or people, or for an organization.
The <ul> HTML element is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless.
ul {
padding: 0;
list-style: none;
}
<address>
<ul>
<li>
<h3>Address</h3>
<p>5263 Fantasy Kebab Road, <br>Bergen, Norway, <br>55060</p>
</li>
<li>
<h3>Phone</h3>
21-666-9112
</li>
<li>
<h3>Email</h3>
bigemail#gmail.com
</li>
</ul>
</address>
there are many ways of adding semantics. One way is to use html5 elements like the address element for your contact information. You can also add an anchor element with href being tel:[number] or mailto:[email]
Sometimes you have information inside that cant be expressed with html tags but you can help a search engine understand your data better by using json-ld or schema.org/microdata. That could be a recipe, pagination, organisations, people, telephone number etc.
I just want that when I press Submit button to get me to the <div id="Home> where the other code will be.
This is my work:
<!DOCTYPE html>
<head>
<title>MyWebsite</title>
</head>
<body>
<div id="Start" align="center">
<h1 style="color:red">My</style><span style="color:blue">Website</span></h1>
<hr/>
Name:<br/>
<input type="text" name="username"><br/>
Password:<br/>
<input type="password" name="password"><br/><br/>
<form action="Home">
<input type="submit" name="continue" value="Continue">
</form>
</div>
<div id="Home" align="center">
<p>Hello world!</p>
</div>
</body>
You need some PHP (or other server side language) between your form and the div below it. Otherwise you're just refreshing the page when you hit submit.
You could also use javascript/jQuery.
Try doing one or both of the above and then come back for help if you have trouble.
So im working with Foundation and I am trying to align the Search bar and search button next to each other. I've tried putting them into a container, and floating them left and right respectively, but that didn't work.
This is what it looks like now: https://gyazo.com/59a22c3c9cd849b1dd9fec6bb9df6bd5
And this is the HTML:
<div class="top-bar-right">
<ul class="menu">
<form method="GET" action="">
<li><input type="text" align="middle" name="search" value="{{ request.GET.search }}"placeholder="Search by Title"></input></li>
<li><button type="button input" class="button">Search</button></li>
</form>
</ul>
</div>
but I want them to be side by side.
Thanks for the help!
EDIT: Forgot to add my html!
One way would be using span ,
li is block element,
So using span will help you make your elements inline.
Copy and Save the code below as an Html file, eg - demo.html
and open it on Browser.
Try this -
<html>
<body>
<div class="top-bar-right">
<form method="GET" action="">
<span>
<input type="text" align="middle" name="search" value="{{ request.GET.search }}"placeholder="Search by Title">
</input>
</span>
<span>
<button type="button input" class="button">
Search
</button>
</span>
</form>
</div>
</body>
</html>
Note -
I've removed your ul tag , it had a css class "menu" , not sure if your code uses it for something.
By default each line item (li) fills the width of its container. To display them side by side, you should use display: inline-block on line items.
You can do this with Foundation's inline-labels-and-buttons:
<div class="top-bar-right">
<ul class="menu">
<li>
<form method="GET" action="">
<div class="input-group">
<input class="input-group-field" type="text" name="search" value="{{ request.GET.search }} " placeholder="Search by Title">
<div class="input-group-button">
<input type="submit" class="button" value="Submit">
</div>
</div>
</form>
</li>
</ul>
</div>
JSFiddle example
I have a screen where everything is fine until I encounter a file input.
I am aware the way that IE rendered the file input makes it two tab stops but for some reason on the first stop Jaws insists on reading the label of the previous field.
Jaws is reading My Field Edit type in text.
I then tab to the input and get My Field Edit.
I then tab again and get star mandatory My File Upload to activate press space bar.
I have tried various combinations of grouping aria-labelledby and aria-describedby but cannot get it to behave differently.
Any suggestions?
This is the chunk of HTML:
<!-- previous field -->
<div id="nodeW137" role="group">
<div >
<label for="nodeW137-MyField" >
<span >My Field</span>
</label>
</div>
<input class="tabindexSet" tabindex="131" name="nodeW137-MyField" id="nodeW137-MyField" maxlength="20" type="text">
</div>
<div id="nodeW138">
<div >
<div id="nodeW139">
<div >
<div id="nodeW141">
<div>
<div id="nodeW143-wrapper" role="group">
<!-- wanting this to be read -->
<div>
<label for="nodeW143">
<span aria-hidden="true" role="presentation">*</span>
<span >Mandatory</span>
<span >My File Upload</span>
</label>
</div>
<!-- input is here -->
<div>
<span id="nodeW143-span" role="link">Upload</span>
<input tabindex="132" aria-hidden="true" role="presentation" id="nodeW143" name="nodeW143" type="file">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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.