I have been trying to set up two hyperlinks on the same page. For some reasons, regardless of the choice made by clicking on the hyperlinks, it always open the html page associated with the first option. Am I missing something?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>Spring Security Example</title>
</head>
<body>
<h1>Welcome</h1>
<p>Click <a th:href="#{/login}"> here </a>for login. </p>
<p>Click <a th:href="#{/registration}"> here </a>to register as a new user.</p>
</body>
</html>
Here is login.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org"
xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>Spring Security Example </title>
</head>
<body>
<div th:if="${param.error}">
Invalid username and password.
</div>
<div th:if="${param.logout}">
You have been logged out.
</div>
<form th:action="#{/login}" method="post">
<div><label> User Name : <input type="text" align="center" name="username"/> </label></div>
<div><label> Password: <input type="password" align="center" name="password"/> </label></div>
<div><input type="submit" value="Sign In"/></div>
</form>
</body>
</html>
The below is registration.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org"
xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>Spring Security Example </title>
</head>
<body>
<form th:action="#{/registration}" method="post">
<div><label> Preferred User Name : <input type="text" align="center" name="username"/> </label></div>
<div><label> Password: <input type="password" align="center" name="pasisword"/> </label></div>
<div><label> Reentered password: <input type="password" align="center" name="password"/> </label></div>
<div><label> Address: <input type="text" align="center" name="address"/> </label></div>
<div><label> Upload Image : <input type="image" align="center" name="photos"/> </label></div>
<div><input type="submit" value="new user"/></div>
</form>
</body>
</html>
MvcConfig.java is as below.
public class MvcConfig implements WebMvcConfigurer {
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/home").setViewName("home");
registry.addViewController("/").setViewName("home");
registry.addViewController("/hello").setViewName("hello");
registry.addViewController("/login").setViewName("login");
registry.addViewController("/registration").setViewName("registration");
}
}
This might help.
Split the string in the href
#{'/' + ${login}}
like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>Spring Security Example</title>
</head>
<body>
<h1>Welcome</h1>
<p>Click <a th:href="#{'/' + ${login}}"> here </a>for login. </p>
<p>Click <a th:href="#{'/' + ${registration}}"> here </a>to register as a new user.</p>
</body>
</html>
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.
The required attribute is not working.Even when I am submitting an empty input,its not showing me an error.
<!DOCTYPE HTML>
<html>
<head>
<title>
EminemCircle
</title>
</head>
<body style="background-image:url(e3.jpg)">
<h1 style="color:red">Hey Come On!</h1>
</br> </br>
<h2 style="color:#00ff00">Dr.Dre Fires 10 million missiles!</h2>
</br> </br>
<form align="center" >
<label style="color:red;font-size:35px">Email id:</label> </br>
<input type="text" size="40px" required /> </br>
<input type="button" value="Submit"/>
</form>
</body>
<html>
Editing your code a bit. You've to change input type="button" to input type="submit" That's it.
<html>
<head>
<title>
EminemCircle
</title>
</head>
<body style="background-image:url(e3.jpg)">
<h1 style="color:red">Hey Come On!</h1>
</br> </br>
<h2 style="color:#00ff00">Dr.Dre Fires 10 million missiles!</h2>
</br> </br>
<form align="center" >
<label style="color:red;font-size:35px">Email id:</label> </br>
<input type="text" size="40px" required /> </br>
<input type="submit" value="Submit"/>
</form>
</body>
<html>
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 following page does send nothing in post request after pressing submit button:
<!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">
<title>My title</title>
</head>
<body>
<form id="myform" method="POST" action="save.php" >
<label for="title">Title: </label>
<input id="title" type="text" size="80" value="Damned"/>
<input type="submit">
</form>
</body>
</html>
Why?
They disobey nothing. You must change
<input id="title">
to
<input id="title" name="somethingThatWillAppearIn$_POST">