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.
Related
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout/default">
<title>Make Page</title>
<script th:inline="javascript" src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js">
</script>
<body layout:fragment="content">
<div style="text-align: center">
<h1>write page</h1>
<form th:action="#{/createDiary}" th:object="${Diary}" method="post">
<p>writer : <input type="text" th:field="*{writer}"/></p>
<p>title : <input type="text" th:field="*{title}"/></p>
<p>content : <input style="width: 300px; height: 300px;" type="text" th:field="*{content}"/></p>
<p><input type="submit" value="add"/> <input type="reset" value="reset"/></p>
</form>
</div>
</body>
</html>
I did this, but it didn't work. So I tried another way
<script th:inline="javascript" src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js">
</script>
Changed to
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>
I still can't look at it. What am I doing wrong?
Is it because Javascript is not used in Timeleaf? Then, is it impossible to use ckeditor?
According to the documentation, you need a <script> tag to load the libary and a bit of JavaScript to setup. So your example should be something like this:
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout/default">
<head>
<title>Make Page</title>
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js">
</script>
</head>
<body layout:fragment="content">
<div style="text-align: center">
<h1>write page</h1>
<form th:action="#{/createDiary}" th:object="${Diary}" method="post">
<p>writer : <input type="text" th:field="*{writer}"/></p>
<p>title : <input type="text" th:field="*{title}"/></p>
<p>content : <input style="width: 300px; height: 300px;" type="text" th:field="*{content}"/></p>
<p><input type="submit" value="add"/> <input type="reset" value="reset"/></p>
</form>
</div>
<script>
ClassicEditor
.create( document.querySelector( '#content' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
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.
I want to align my label element to the top left of my input element, so its right on the edge of the left side of the top of the input. How can I acheive this?
This is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./css/main.css"></link>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="notification">
<btn id="close"> Close </btn>
</div>
<h3>Movie Reviews</h3>
<div id="error-div"></div>
<form class="create-movie-form" action="submit">
<label for="title">Movie Title:</label>
<input type="text" name="title" id="title" placeholder="Movie Title" />
<label for="runtime">Movie Runtime:</label>
<input type="text" name="runtime" id="runtime" placeholder="Runtime" />
<label for="rating">Movie Rating:</label>
<input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
<label for="review">Movie Review:</label>
<input type="text" name="review" id="review" placeholder="Write a review for this movie" />
<button type="submit" id="create-btn">Create movie</button>
</form>
<script src="../node_modules/axios/dist/axios.min.js"></script>
<script src="functions.js"></script>
<script src="main.js"></script>
</body>
</html>
Thank you!
This is what you need. display: block
Just use CSS property display: block to show labels on top of your element and on left side as you wanted.
Just run snippet to see it in action.
label {
display:block;
}
button {
display:block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="notification">
<btn id="close"> Close </btn>
</div>
<h3>Movie Reviews</h3>
<div id="error-div"></div>
<form class="create-movie-form" action="submit">
<label for="title">Movie Title:</label>
<input type="text" name="title" id="title" placeholder="Movie Title" />
<label for="runtime">Movie Runtime:</label>
<input type="text" name="runtime" id="runtime" placeholder="Runtime" />
<label for="rating">Movie Rating:</label>
<input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
<label for="review">Movie Review:</label>
<input type="text" name="review" id="review" placeholder="Write a review for this movie" />
<button type="submit" id="create-btn">Create movie</button>
</form>
</body>
</html>
Hope this help.
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">