I already using host_permissions to navigate to the localhost itself since it is Manifest V3. But when I click the submit button, it do not navigate to the LocalHost. However, when I execute or launch the basic HTML, the code able to navigate to the LocalHost as usual but it does not navigate through the extension.
{
"name": "Detection Tool",
"description": "Mic Check DetectionTool 123",
"manifest_version": 3,
"action": {
"default_popup": "yolo.html",
"default_icon": "logo.png"
},
"icons" :{
"64" : "logo.png"
},
"version" :"1",
"host_permissions": ["http://localhost/*"],
"optional_host_permissions": ["*://*/*"]
}
This is the simple HTML that i use
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<style>
input[type="text"] {
padding: 3px;
margin: 8px;
text-align: center;
font-size: 18px;
}
</style>
<body>
<form action="http://localhost/db1/script.php" method="POST">
<input type="text" name="name" placeholder="Your Name"><br>
<input type="text" name="email" placeholder="Your Email"><br>
<input type="submit" value="Register" name="submit">
</form>
</body>
</html>
Related
I just started learning html and CSS and I'm in a difficult situation. I'm trying to build a website, and I'm not sure how can I get an email sent to my email address from this form. Do I need to use JavaScript in order to get the email sent? How can I do it? Can somebody help me finish this page? The code is below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
</head>
<body>
<h3>Contact Form</h3>
<div class="container">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
There is no feature in HTML to send the form submission directly to an email address.
The example below is from w3schools.com try html form mail
where you can also see the result of the mentioned mailto: option:
<!DOCTYPE html>
<html>
<body>
<h2>Send e-mail to someone#example.com:</h2>
<form action="mailto:someone#example.com" method="post" enctype="text/plain">
Name:
<br>
<input type="text" name="name">
<br> E-mail:
<br>
<input type="text" name="mail">
<br> Comment:
<br>
<input type="text" name="comment" size="50">
<br>
<br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
Your code seems to come from an example like this try hmtl form submits example,
which sends query parameters as fname=John&lname=Doe to a php script,
which is then supposed to send the email.
Read here how to send emails using php, but if you just starting html and css, this is a completely different story, I hope this helps anyway. A lot of stuff to read and study.
First time using bootstrap and first time asking a question on stackoverflow! I am creating this mockup with forms for email, subject and message. I am also using bootstrap validator to get error messages to pop-up (like ""). but they appear all the way to the left of the window. Anyone know of a way to get the below the input box? Or even above the input box? Like if where says "Email" I would like the error message that says "Please enter a valid email" to pop up right next to it. I've included the html and css. Hopefully I did it right. Thanks!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="form-issue.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.rawgit.com/PascaleBeier/bootstrap-validate/v2.2.0/dist/bootstrap-validate.js"></script>
</head>
<body>
<div class="contact">
<h2>CONTACT</h2>
<form action="" method="POST">
<div class="form-group">
<label class="label" for="email">Email</label>
<input id="email" class="form-control" type="text" name="email">
</div>
<div class="form-group">
<label class="label" for="subject"> Subject </label>
<input id="subject" class="form-control" type="text" name="subject">
</div>
<div class="form-group">
<label class="label" for="message">Message</label>
<textarea id="message" class="form-control" name="message" rows="10"></textarea>
<input class="button" type="submit" value="Submit">
</div>
</form>
</div>
<script>
bootstrapValidate('#email', 'email:Please enter a valid email');
bootstrapValidate('#subject', 'required:Subject is required');
bootstrapValidate('#message', 'required:Message is required');
</script>
</body>
</html>
.contact {
color: white;
background-color: #c0c0c0;
padding-top: 2%;
padding-bottom: 4%;
width: 100%;
}
.contact h2 {
text-align: center;
}
.form-group {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin: 25px;
}
#email,
#subject,
#message {
width: 30%;
}
.label {
width: 30%;
text-align: left;
}
.button {
background-color: #000000;
color: white;
text-align: center;
width: fit-content;
min-height: inherit;
border-color: #000000;
border-width: 10px;
margin-top: 20px;
margin-bottom: 5px;
}
Please see below example for validation! And add one line style: .invalid-feedback{ width:30%; }
Please see below example for validation! And add one line style: .invalid-feedback{ width:30%; }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.rawgit.com/PascaleBeier/bootstrap-validate/v2.2.0/dist/bootstrap-validate.js"></script>
<script type="text/javascript">
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</head>
<body>
<div class="contact">
<h2>CONTACT</h2>
<form action="" method="POST" class="needs-validation" novalidate>
<div class="form-group">
<label class="label" for="email">Email</label>
<input id="email" class="form-control" type="text" name="email" required="">
<div class="invalid-feedback"> Please enter valid email.</div>
</div>
<div class="form-group">
<input class="button" type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
Use Bootstrap class "text-center" in class attribute of an element.
LANG=en_US.UTF-8 in my locale,i don't want to change it.
<head>
<head>
<meta charset="UTF-8">
</head>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="upimage"></br>
<input type="submit" value="上传">
</form>
It was displayed as following.
1.How to change the string Browse... into 浏览?
2.How to change the string No file selected. into 请选择上传文件?
You can try something like:
<label for="files" class="file_class" name="upimage">浏览</label>
<input id="files" style="visibility:hidden;" type="file">
<input type="submit" value="上传">
Then you just style the label
.file_class {
border: 1px solid black;
padding:5px;
}
I'm trying out example codes from a book called "Murach's Java Servlet and JSP" For some reason, I can't get the CSS to work. Netbeans doesn't seem to find the main.css file using a relative href path.
index.html
<html>
<head>
<title>Murcah's Java Servlet and JSP</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="resources/css/main.css" type="text/css" />
</head>
<body>
<h1>Join our email list</h1>
<p>To join our email list, enter your name and email address below.</p>
<form action="emailList" method="post">
<input type="hidden" name="action" value="add" />
<label>Email: </label>
<input type="email" name="email" required /> <br />
<label>First Name:</label>
<input type="text" name="firstName" required /> <br/>
<label>Last Name:</label>
<input type="text" name="lastName" required /> <br />
<label> </label>
<input type="submit" value="Join Now" id="submit" />
</form>
</body>
</html>
main.css
body{
font-family: Arial,Helvetica,sans-serif;
font-size: 11pt;
margin-left: 2em;
margin-right: 2em;
background-color: darkred;
background: yellow;
}
h1{
color:teal;
}
label{
float:left;
width:6em;
margin-bottom: 0.5em;
}
input[type="text"], input[type="email"]{
width: 15em;
margin-left: 0.5em;
margin-bottom: 0.5em;
}
br{
clear:both;
}
#submit{
margin-left: 0.5em;
}
context.xml
<?xml version="1.0" encoding="UTF-8"?>
<Context path="/ch02email"/>
Here's how the resources are organized into sub-folders.
And main.css path I believe to be ch02email/resources/css/main.css But since I have set the contextPath to
<?xml version="1.0" encoding="UTF-8"?>
<Context path="/ch02email"/>
on index.html you can see that my href is <link rel="stylesheet" href="resources/css/main.css" type="text/css" />
For some reason the css doesn't apply. Also, I tried to view the source to open the css but I get the ff.
view source
view sourceI get a 404 message.
(view source)
I tried both on Firefox and Google Chrome but I get the same result. CSSenter code here file can't be found.
What am I missing here? I even tried to put WEB-INF/resources/css/main.css which I don't think to be right as I understand not to include WEB-INF when referencing.
Lastly, I tried to use <base href="${pageContext.request.contextPath}/"/> with no success.
Please help.
Thank you.
I just found out the reason why it's not able to access the main.css file. I found the information here. I found that files contained in WEB-INF are not accessible publicly. So what I did was move the resources folder like what's on the screenshot.
resources folder is now contained in Web Pages folder.
I know this is a simple question but caused headache for that very simple detail I didn't know.
I hope this helps others who will find this post. :)
Following is the code, the problem is it works fine on desktop browsers i.e. red color for disabled input, but on a mobile browser it doesn't show red, instead its grey, any ideas?
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testing</title>
<style>
input[disabled] {
color: #f55;
font-weight: bold;
}
</style>
</head>
<body>
<section>
<form id="myForm" method="post" action="forms.php">
<input type="text" name="username" value="Username" disabled> <br>
<input type="password" name="password" placeholder="Password"> <br>
<input type="submit" name="submit"> <br>
</form>
</section>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testing</title>
<style>
input[disabled] {
color: #f55;
font-weight: bold;
}
#media only screen and (max-width:1000px) {
input[disabled]{
color: #C90;
font-weight:bold;
}
</style>
</head>
<body>
<section>
<form id="myForm" method="post" action="forms.php">
<input type="text" name="username" value="Username" disabled> <br>
<input type="password" name="password" placeholder="Password"> <br>
<input type="submit" name="submit"> <br>
</form>
</section>
</body>
</html>
You can use media queries for that and instead of putting this style in html document it would be more appropriate to keep external style sheet for long css....You can target different devices by setting maximum width for different devices in #media inside css