I'm trying to create an Emmet (+TAB) shortcut and I have 90% of it complete. I just can't figure out how to get the last nested elements to be on their own lines. The label, input and closing div tag are all on one line. I'd like to have them all on separate lines
snippet.json code
"form+": "section.form-container>div.form-wrapper>form:post>(div.form-group>label+inp)+btn:s"
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<section class="form-container">
<div class="form-wrapper">
<form action="" method="post">
<div class="form-group"><label for=""></label><input type="text" name="" id=""></div>
<button type="submit"></button>
</form>
</div>
</section>
Trying to get it to look like this automatically
<section class="form-container">
<div class="form-wrapper">
<form action="" method="post">
<div class="form-group">
<label for=""></label>
<input type="text" name="" id="">
</div>
<button type="submit"></button>
</form>
</div>
</section>
</body>
</html>
In this case, the element layout is controlled by inline_break option of output profile, which acts globally for all snippets expanded by Emmet. You can reduce inline_break to 2, it will cause elements to lay out as expected
Related
The data sent is not being submitted using through url. When I click submit, the url does not have the key value pairs.Note: I have not named anything in action.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Assignment1.19</title>
</head>
<body>
<h1>Register</h1>
<form class="" action="#" method="GET">
<div class="">
<label for="hi" >First Name:</label>
<input id="hi" type="text" name="" value="" placeholder="Jane" name= "hello" required autofocus>
<label for="no">Last Name:</label>
<input id="no" type="text" name="" value="" placeholder="Doe"name= "naw" required>
<br>
</div>
<div class="">
<button type="submit" name="button">Submit</button>
</div>
</form>
</body>
</html>
You have two name attributes and no value values.
You also should have whitespace separating each attribute.
Also, your action should point to a URL that handles the request.
So I have this HTML file and it's giving me two validation errors and I have no idea how to fix it, I think it's because the style is out of scope but I have no idea where to place it, been playing around with it for a good hour or so now.
As you can see below I added a picture showing the validation errors using this website https://validator.w3.org/nu/#file
is this a scope issue or what is going on here?
And if I add it in the I get this
<!DOCTYPE html>
<html>
<head>
<title>ComputerFix</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
</head>
<style>
main {
display:flex; width: 100%;
align-items:center;
justify-content:center;
}
label {
display:block;
}
</style>
<body class="StandardBackground">
<div id="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Information</li>
<li>Contact</li>
<li>Download</li>
</ul>
</div>
<main>
<form>
<fieldset>
<legend>Kontakta oss</legend>
<div>
<label for='name'>Name:</label>
<input type="text" name='name'>
</div>
<div>
<label for='email'>Email:</label>
<input type="email" name='email'>
</div>
<div>
<label for='phone'>Telefonnummer:</label>
<input type="text" name='phone'>
</div>
<div>
<label for='meddelande'>Meddelande:</label>
<textarea name='meddelande'></textarea>
</div>
<div>
<input type='submit'>
</div>
</fieldset>
</form>
</main>
</body>
</html>
A <style> element must appear inside the <head> element. You have put it between the <head> and <body> elements where nothing is allowed.
The for attribute of a <label> needs to reference the id of the associated form control, not the name. (Multiple elements can share a name, which makes it unsuitable for associating anything with a particular element).
Placement of <style> should be in the <head> and the form inputs should be using ids, not names in order to validate.
<!DOCTYPE html>
<html>
<head>
<title>ComputerFix</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<style>
main {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
label {
display: block;
}
</style>
</head>
<body class="StandardBackground">
<div id="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Information</li>
<li>Contact</li>
<li>Download</li>
</ul>
</div>
<main>
<form>
<fieldset>
<legend>Kontakta oss</legend>
<div>
<label for="name">Name:</label>
<input type="text" name="name" id="name">
</div>
<div>
<label for="email">Email:</label>
<input type="email" name="email" id="email">
</div>
<div>
<label for="phone">Telefonnummer:</label>
<input type="text" name="phone" id="phone">
</div>
<div>
<label for="meddelande">Meddelande:</label>
<textarea name="meddelande" id="meddelande"></textarea>
</div>
<div>
<input type="submit">
</div>
</fieldset>
</form>
</main>
</body>
</html>
The for in your label refers to the id of the desired element:
<div>
<label for='name'>Name:</label>
<input type="text" name='name' id='name'>
</div>
Check it out here: https://www.w3schools.com/tags/tag_label.asp
As already pointed out, make 2 corrections to your code :
1.) Put the Style tags between the head opening and closing tags. This is a strict criteria for internal CSS.
2.) The for attribute used by you in the form uses the value of "id" and not "name". So put another attribute in the input tag id="name" OR id="email" or whatever.
I just started working with forms and inputs http://www.w3schools.com/html/html_forms.asp and they work fine as far as I can tell, but they cause a load of errors when I run it through W3C validation service. http://validator.w3.org/#validate_by_input
The code validates fine when I remove the forms and inputs. The only thing I can think of, is that the forms and inputs are not entirely html, as I don`t yet know what the name= does
Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>login</title>
<link type='text/css' rel='stylesheet' href='css/login.css'>
</head>
<body>
<div id ="header">
<h1>log in</h1>
</div>
<div id ="name">
<form>
editors name: <input type="text" name="name">
</form>
</div>
<div id="pswd">
<form>
password: <input type="password" name="pwd">
</form>
</div>
<div id="options">
<h3>Or</h3>
</div>
<div id="wayBack">
Return to page
</div>
</body>
</html>
I think what you're trying to achieve is this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>login</title>
<link type='text/css' rel='stylesheet' href='css/login.css'>
</head>
<body>
<div id ="header">
<h1>log in</h1>
</div>
<form action="/">
<div id ="name">
editors name: <input type="text" name="name">
</div>
<div id="pswd">
password: <input type="password" name="pwd">
</div>
</form>
<div id="options">
<h3>Or</h3>
</div>
<div id="wayBack">
Return to page
</div>
</body>
</html>
The fields should be contained with in one form so that they get submitted together. The errors were raised because it's not valid to have text (editors name / password) as a direct child of a FORM element
A more semantic solution would be...
<form action="/">
<div>
<label for="input_name">editors name:</label>
<input type="text" name="name" id="input_name" />
<p>It's completely valid to have text here inside a P tag</p>
<label for="input_password">password:</label>
<input type="password" name="password" id="input_password" />
</div>
</form>
This would allow the user to click on the label in order to focus the corresponding form field
The form is displayed on the browser, but when I roll my cursor over the text fields, it just doesn't take the input. How is this caused and how can I solve it?
<html>
<head>
<title>Chemicals.ltd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<!--> <div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
<img src='C:\Users\Dell\Downloads\chem.jpg' style='width:100%;height:100%' alt='[]' />
</div><!-->
<h2> Welcome to TOXIC TRADERS ! </h2>
<p>We trade chemicals , for industrial or lab use.<br> Please enter Relevant info in the form </p>
<form name="Details" action="/ChemControl" method="POST">
Chemical Name: <input type="text" name="Chemical"><br>
Hazard Level(No.): <input type="text" name="Hazard type"><br>
Lab/Company Name: <input type="text" name="Lab Name" ><br>
Serial No.: <input type="text" name="Serial No."><br>
<input type="submit" value="Send Info">
</form>
</body>
</html>
You are overlaying your form with a div, that blocks the input. Remove it:
<html>
<head>
<title>Chemicals.ltd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<h2> Welcome to TOXIC TRADERS ! </h2>
<p>We trade chemicals , for industrial or lab use.<br> Please enter Relevant info in the form </p>
<form name="Details" action="/ChemControl" method="POST">
Chemical Name: <input type="text" name="Chemical"><br>
Hazard Level(No.): <input type="text" name="Hazard type"><br>
Lab/Company Name: <input type="text" name="Lab Name" ><br>
Serial No.: <input type="text" name="Serial No."><br>
<input type="submit" value="Send Info">
</form>
</body>
Your html comments are invalid
should be
<!-- <html not displayed> -->
Not
<!--> <html not displayed> <!-->
Result is the html that it appears you are trying to comment out is masking the form
Your div tag with 100% height and 100% width has covered the entire view port like a modal form, hence the area beneath it has become non-clickable. Remove the height and width from tag like below:
<div style='position:absolute;z-index:0;left:0;top:0;'>
<img src='C:\Users\Dell\Downloads\chem.jpg' style='width:100%;height:100%' alt='[]' />
</div>
Your font size is probably set to zero.
Add this to your css style file:
input {
font-size: 10pt;
}
Or add the style directly on the HTML tag:
<input style="font-size: 10pt;" type="submit" value="Send Info">
The text boxes get red borders when text is removed from them. However, the textarea does not follow this behavior. What is the problem and how do I remedy it?
http://jsfiddle.net/cKYNy/9/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="ISO-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page_1" data-theme="b">
<div data-role="content" data-theme="b" style="padding:0px;margin:0;">
<p>Content Page 1</p>
<form name="contactForm" id="contactForm" data-ajax="false" method="post">
<div>
<input type="text" id="name" name="name" value="" required="true"></input>
</div>
<div>
<input id="email" name="email" type="email" value="" required="true"></input>
</div>
<div>
<textarea name="message" id="message" required="true"></textarea>
</div>
<div>
<input type="submit" name="submit" id="submit" value="Submit"></input>
</div>
</form>
</div>
</div>
</body>
</html>
If it is not an option of JQuery Mobile you might wanna try the following:
$("#contactForm").submit(function (e) {
e.preventDefault();
if ($('#name')[0].checkValidity() === false) {
$('#name')[0].toggleClass("error");
}
}
Catch the submit event on the form, stop it from submitting and check the validation yourself. If not valid, add an error class.