I'm trying to add a vag font inside my form. i placed the "VAG Rounded Std-Black.otf" font in a folder outside name "fonts" to link it. but i still cant get it to work in a form text field?
any help to the solution would be helpful. thx yummi
<style type="text/css" href="/fonts">
#font-face {
font-family: vag;
src: url(fonts/VAG Rounded Std-Black.otf);
}
body {
background-color: dimgrey;
font-family: Arial;
color: white;
font-size: 20px;
margin: 50px;
}
/*... input message ...*/
input[type=text] {
width: 300px;
height: 40px;
border: none;
outline: none;
padding-left: 37px;
font-family: vag;
font-size: 14px;
color: white;
font-weight: bold;
letter-spacing: .5px;
background-color:grey;
}
<!-- input message -->
<form><input style="color:white;font-family: vag;" type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
You can check This Code
I've Used Google fonts
<!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=M+PLUS+Rounded+1c:wght#700&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<form><input style="color:black; font-family: 'M PLUS Rounded 1c', sans-serif;" type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
</body>
</html>
Related
is there a reason why the outcome from a form "enctype" is so different between plain text and multipart form-data? Is there a way to get the data from "multipart/form-data" in a breakdown layout?
<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>Design Survey Tracker Form</title>
<style>
h1 {
font-size: 24px;
font-style: bold;
font-family: Verdana;
padding: 10px;
}
h2 {
font-size: 20px;
font-family: Verdana;
padding: 10px
}
p {
font-size: 16px;
font-family: Verdana;
padding: 10px;
min-width: 33%;
}
form {
font-size: 16px;
font-family: Verdana;
padding: 10px;
align-items: left;
}
select,input,button {
font-size: 16px;
font-family: Verdana;
border-radius: 5px;
border-width: 0.2rem;
cursor: pointer;
padding: 10px;
vertical-align: middle;
}
label {
font-size: 16px;
font-family: Verdana;
padding: 10px;
min-width: 33%;
}
</style>
</head>
<body>
<header style="background-color: white; padding: 20px;">
<p style="font-size: 12px;">This is a designated form <br>
Please fill the form with relevant information and submit. <br>
For any query or assistance, please ask to <a href = ></a></p>
</header>
<main style="background-color: #d9e3f0; padding: 20px;">
<form action="MAILTO:" enctype="text/plain" method="post">
<h2>1. Site Name</h2>
<label for="site-name">What's the site you're reporting from?</label>
<select required name = "What's the site you're reporting from?" id="Site Name" style="width:350px">
<option value="Site A">Site A A</option>
<option value="Site B">Site B</option>
</select>
<h2>2. Project Form</h2>
<label for="phase">Which phase/form are you applying? (In brackets you can find role suggestion for submission)</label><br><br>
<input required type = "radio" name = "phase" value = "A">Test Site A<br>
<input required type = "radio" name = "phase" value = "B">Test Site B<br>
<h2>3. Submission Date</h2>
<label for="submission-date">What's the date of the submission you're reporting?</label>
<input type="date" name="sumbission" id="date">
<h2>4. Action Responsible/Owner</h2>
<label for="owner">Who's the Author/Owner of this action?</label>
<form>
<input required type="text" name="Author" placeholder="Enter the Author/Owner of this action" id="author" style="width: 300px;"><br>
<input type="submit" value="Submit" style="width: 300px;">
</form>
</main>
</body>
</html>
This is what I get when I put plain text:
What's the site you're reporting from?=Site A
phase=A
sumbission=2066-01-01
Author=John Doe
this is what i get when it's multipart form-data:
What%27s+the+site+you%27re+reporting+from%3F=Site+A&phase=A&sumbission=2001-01-01&Author=John+Doe
Also, is there a way to format the text coming out from form action?
Like any script the get the data, reformat and send it as an email? Any pointers on it is appreciated.
Thanks!
I've been learning web development for about a month now and I recently got stuck on something. I was making a simple login page as practice but when I try to make the input fields bigger, it doesn't do anything. This is my HTML and CSS code:
<!DOCTYPE html>
<html lang="en_US">
<head>
<!-- Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Isaac Guillen">
<!-- Link CSS -->
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<!-- Website Title -->
<title>My Website</title>
</head>
<body>
<section id="Login-Box">
<h1 class="login-txt">Login</h1>
<div class="usrname-input">
<input type="text" placeholder="Username">
</div>
<div class="passwd-input">
<input type="password" placeholder="Password">
</div>
<div class="submit-button">
<input type="button" value="Submit">
</div>
</section>
</body>
</html>
*{
margin: 0;
padding: 0;
color: black;
font-family: "Fira Code";
}
.login-txt{
font-size: 60px;
position: relative;
left: 1400px;
top: 150px;
}
.usrname-txt{
font-size: 40pt;
}
Can anyone help me? I don't know if I did anything wrong.
Your problem is that you changed only the size of a different element not a textarea.
You can correct it by adding a class to both textareas and than changing their width and height.
Just like this:
<!DOCTYPE html>
<html lang="en_US">
<head>
<!-- Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Isaac Guillen">
<!-- Link CSS -->
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<!-- Website Title -->
<title>My Website</title>
</head>
<body>
<section id="Login-Box">
<h1 class="login-txt">Login</h1>
<div class="usrname-input">
<input type="text" placeholder="Username" class="username-area">
</div>
<div class="passwd-input">
<input type="password" placeholder="Password" class="password-area">
</div>
<div class="submit-button">
<input type="button" value="Submit">
</div>
</section>
</body>
</html>
Plus CSS:
*{
margin: 0;
padding: 0;
color: black;
font-family: "Fira Code";
}
.login-txt{
font-size: 60px;
position: relative;
left: 1400px;
top: 150px;
}
.usrname-txt{
font-size: 40pt;
}
.username-area{
width: 30%;
height: 40px;
}
.password-area{
width: 30%;
height: 40px;
}
You are using a wrong class selector, try this css:
*{
margin: 0;
padding: 0;
color: black;
font-family: "Fira Code";
}
input{
font-size: inherit; /*Takes parent element's font size*/
}
.login-txt{
font-size: 60px;
position: relative;
left: 1400px;
top: 150px;
}
.usrname-input{ /*usrname-txt does not exists*/
font-size: 40pt;
}
Demo: https://jsfiddle.net/pjm5b4d0/2/
You have to select the input fields using a class or an id.
Here is a quick example:
input {
font-size: 3rem;
padding: 1rem;
margin-bottom: .5rem;
}
Although I put the links of font-awesome and google fonts, the fonts on the website does not change. I do not know how to fix it. Does anyone know what causes this problem?
contact.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>American Website Design & Development Agency - JOEY NAMIKI DESIGN</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/contact.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=PT+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<section class="contactSection">
<h1>Please tell me what kind of design you want to get?</h1>
<div class="contactForm">
<div class="tweet">
<h1>We listen all clients</h1>
<p>If you have any concerns regards to web, marketing, branding, design and redesign, feel free to ask me. I will give you the estimation.</p>
</div>
<form method="post" action="send.php" id="content">
<div>*Name<input type="text" name="name" required></div>
<div>Company Name<input type="text" name="company"></div>
<div>*Phone Number<input type="text" name="phone" required></div>
<div>*Email<input type="text" name="email" required></div>
<div>*Message<textarea type="text" name="message" ></textarea></div>
<div><input type="submit" class="send" value="submit"></div>
</form>
</div>
</section>
</body>
</html>
contact.css
#media only screen and (max-width: 2592px) {
html, body {
width: 100%;
height: 100%;
margin: 0;
background: black;
overflow-x: hidden;
color: cornsilk;
font-family: 'Roboto', sans-serif, 'PT Sans'sans-serif, Helvetica sans-serif;
font-size: 16px;
line-height: 160%;
}
button {
text-transform: uppercase;
font-weight: bold;
}
a {
font-size: 18px;
text-decoration: none;
}
h1 {
font-size: 42px;
font-weight: bold;
line-height: 120%;
font-family: 'Roboto', sans-serif, 'PT Sans'sans-serif, Helvetica sans-serif;
}
p {
font-size: 17px;
line-height: 1.4;
}
}
Try this
font-family: 'Roboto', 'PT Sans', 'Helvetica', sans-serif;
The line states that the first priority is given to Roboto, somehow if that font is not found, PT Sans will be applied. On the third priority, Helvetica is there.
For any reason if these fonts failed to load, we have set sans-serif as the last priority, any supported Sans-serif (Ariel or any other) fonts will be applied.
Hello everyone and happy Friday,
I would like to align to the center of the page, the title (top) and right below the search box (below the title), possibly without the search button.
Right now, I have two issues.
The first one, the search box is not align to the center.
The second one, if I eliminate the search button, the query does not work after I press Return.
How can I achieve those two challenges?
Thank you so much in advance for your help.
Below is my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CLIHELP - Help for Command Line Interface</title>
<meta name="description" content="Help for Command Line Interface">
<meta name="author" content="clihelp.org">
<style>
.site-title {
position:absolute;
top:50%;
left:50%;
margin-top:-180px;
margin-left:-280px;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26px;
}
.search {
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-100px;
}
.search input {
height: 40px;
width: 487px;
}
</style>
</head>
<body>
<div class="site-title">
<h1>CLIHELP - Help for Command Line Interface</h1>
</div>
<div class="search">
<form action='q.php' method='GET'>
<input type='text' size='25' name='search'>
<input type='submit' name='submit' value='Search' >
</form>
</div>
</body>
</html>
Almost done, this is my code now. It works but the query still does not work after I press the Enter key.
This is again my code with the suggested modifications:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CLIHELP - Help for Command Line Interface</title>
<meta name="description" content="Help for Command Line Interface">
<meta name="author" content="clihelp.org">
<style>
.content {
text-align: center;
padding-top: 50px;
}
.site-title h1 {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26px;
}
.search {
display: inline-block;
width: 487px;
}
.search input {
height: 40px;
width: 100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
$(document).ready(function() {
$('.submit_on_enter').keydown(function(event) {
if (event.keyCode == 13) {
this.form.submit();
return false;
}
});
});
</script>
</head>
<body>
<div class="content">
<div class="site-title">
<h1>CLIHELP - Help for Command Line Interface</h1>
</div>
<div class="search">
<form action='q.php' method='GET'>
<input type='text' size='25' class="submit_on_enter" name='search'>
</form>
</div>
</div>
</body>
</html>
Here is an example of how it might work for you:
$(document).ready(function() {
$('.submit_on_enter').keydown(function(event) {
if (event.keyCode == 13) {
this.form.submit();
return false;
}
});
});
.content {
text-align: center;
padding-top: 50px;
}
.site-title h1 {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26px;
}
.search {
display: inline-block;
width: 487px;
}
.search input {
height: 40px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="site-title">
<h1>CLIHELP - Help for Command Line Interface</h1>
</div>
<div class="search">
<form action='q.php' method='GET'>
<input type='text' size='25' class="submit_on_enter" name='search'>
</form>
</div>
</div>
There are many alternative to how to send a form 'without' a submit button. The one I picked here comes from Submitting a form by pressing enter without a submit button. You can look there for more options and details about this.
Also you might want to checkout something like bootstrap and it's templates. For this purpose this one could bee easy to modify https://getbootstrap.com/examples/signin/.
I tried using different editors and IDEs (netbeans and visual studio code) along with different browsers (firefox developers edition), yet, I can't seem to get the css sheet to apply to the main html file.
The style sheet editor is saying that there is no style sheet attached to the html file
Here's the html file:
<!DOCTYPE html>
<html>
<head>
<title>The Animal Game</title>
<meta charset="utf-8"/>
<link href="animalgame.css" type="text/css" rel="stylsheet" />
<script src="animalgame.js" type="text/javascript"></script>
</head>
<body>
<h1>The Animal Game</h1>
<p>Think of an animal, then let me guess it!</p>
<div id="container">
<fieldset>
<legend>Questions</legend>
<p id="questions"></p>
</fieldset>
<fieldset id="answer">
<legend>Answer</legend>
<button id="yes">Yes</button>
<button id="no" >No</button>
</fieldset>
</div>
</body>
</html>
CSS style sheet:
body {
font: 12pt "Century Gothic", "Helvetica", "Arial", sans-serif;
}
button {
font-size: 20pt;
font-weight: bold;
margin: 15px auto;
}
#container{
margin: auto;
width: 520px;
}
fieldset {
background-color: #F0F0F0;
float: left;
height: 150px;
margin-right: 15px;
text-align: center;
}
h1, p {
text-align: center;
}
#questions {
font-size: 16pt;
text-align: center;
width: 300px;
}
EDIT: problem solved! There was a typo. Thank you for all hints
You have a typo in rel="stylsheet" it should be stylesheet