Is there a way to fill an input field with a variable. I think something like this:
<input id="email2" name="email2" value>
If you want it to present with actual value, use value attribute and set it to what you want. If you just want placeholder text or number that shows up but doesnt actually have any value, use the placeholder attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>document</title>
</head>
<body>
<input id="email2" value="2345">
<!-- OR -->
<input id="email3" placeholder="123">
</body>
</html>
Related
We have a problem on our page. We use a plugin for choosing a startdate, but this plugin does not display the calandar icon for choose the date. All is working except the calandar icon to show to the customer that he can click. Now we try to insert a icon in the second row of the flex box.
.wscsd_calendar_dates_field::after {
content: "\f073";
}
But with this, it adds a new row to the flexbox and displays the icon. But we want to have it in the second one becasue the user can click there to open the date chooser.
This is the HTML structure we have...
<div class="wscsd_date_picker">
<label for="wscsd_date_picker_display">Abo Start:</label>
<div class="wscsd_date_picker">
<input type="date" class="short wscsd_calendar_dates_field" style="" id="wscsd_start_date" name="wscsd_start_date" min="2022-02-06" value="2022-02-06" placeholder="2022-02-06">
</div>
</div>
How can we do this?
.wscsd_calendar_dates_field::after {
content: "\f073";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="wscsd_date_picker">
<label for="wscsd_date_picker_display">Abo Start:</label>
<div class="wscsd_date_picker">
<input
type="date"
class="short wscsd_calendar_dates_field"
style=""
id="wscsd_start_date"
name="wscsd_start_date"
min="2022-02-06"
value="2022-02-06"
placeholder="2022-02-06"
/>
</div>
</div>
</body>
</html>
I want to create an HTML button that acts like a link. So, when you click the button, it redirects to a page. I would like it to be as accessible as possible.
I would also like it so there aren't any extra characters, or parameters in the URL.
How can I achieve this?
There are many ways you can do this the easiest way is using a href and you can add styling to the element using bootstrap classes. The code is given below.
<!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>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
</head>
<body>
Go to Google
</body>
</html>
I set up a website using TYPO3 v9.5.9 and I can't find the <title> tag on the HTML source.
How can I insert the current page <title> automatically into the header?
Here is how my header is currently displayed:
<!DOCTYPE html><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="TYPO3 CMS" />
<link rel="stylesheet" type="text/css" href="typo3conf/ext/frontend_editing/Resources/Public/Css/frontend_editing.css?1562352305" media="all" />
<link rel="stylesheet" type="text/css" href="typo3/sysext/backend/Resources/Public/Css/backend.css?1566293615" media="all" />
This solution solved my problem. It was necessary to remove the line :
config.noPageTitle = 2
Thanks to #Riccardo De Contardi for this solution.
I have set up a node js based server. I need to display specific polish characters in one of my pages. I have tried to add few lines I found in internet but there was no success, I'm still getting "?" instead of getting polish character. For views I use ejs.
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta http-equiv="Content-Type" content="text/html">
<meta charset = "UTF-8">
<meta http-equiv="refresh" content="10" >
<title>KOLEJKA</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="icon" href="/images/favicon1.png" />
</head>
<body style="background-color: #c2c2d6; overflow: hidden">
<div id = "NazwaPrzychodni">
Niepubliczny Zakład Medycyny Rodzinnej <br />
"Modzelewska - Bakun" S.C.
</div>
</body>
</html>
My actual result is "Niepubliczny Zak?ad medycyny rodzinnej" instead of "Niepubliczny Zakład medycyny rodzinnej". (you can find it in div).
You could try this:
<!DOCTYPE html>
<html lang="pl">
<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>KOLEJKA</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="icon" href="/images/favicon1.png" />
</head>
<body style="background-color: #c2c2d6; overflow: hidden">
<div id="NazwaPrzychodni">
Niepubliczny Zakład Medycyny Rodzinnej <br />
"Modzelewska - Bakun" S.C.
</div>
</body>
</html>
For me, this code works OK :
http://next.plnkr.co/edit/DKvMsvAwoxMPu36J?open=lib%2Fscript.js&preview
I encountered a strange behavior for #RenderSection in the head section of _Layout.
#section AddToHead{
<meta name="test" />
<open-graph og-title="#Model.Test.OG.Title" og-image="#Model.Test.OG.Image" og-url="#Model.Test.OG.Url" og-type="#Model.Test.OG.Type"></open-graph>
}
meta => is plain html
open-graph => is a taghelper which returns html
and added on _Layout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
#await RenderSectionAsync("AddToHead", required: false)
</head>
I tried already with RenderSectionAsync and RenderSection. No difference.
When I check the result on page it is as follows (total different result)
View Source Code
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="test" />
<div><meta property='og:title' content='TestTitle' /><meta property='og:type' content='Article' /><meta property='og:url' content='TestURL' /><meta property='og:image' content='TestBild' /></div>
</head>
Developer Tools
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="test" />
</head>
<body>
<div><meta property='og:title' content='TestTitle' /><meta property='og:type' content='Article' /><meta property='og:url' content='TestURL' /><meta property='og:image' content='TestBild' /></div>
</body>
Facebook sees my site like Developer Tools does.
What I'm doing wrong? Is this even possible?
Developer tools shows how the browser interprets your HTML which is why you're seeing a difference between viewing source and the developer tools.
As for why that's happening, <div> tags in the <head> are problematic. Most browsers these days will interpret those <div> tags as if they were in the body. If you were to render your <meta /> tags without the surrounding div all should be fine.