I am learning to program with shiny but I am stuck on some actions.
I have a html file (index.html, which also contains css code) where you need to enter a username and password and a login button which is used to send the values of the username and password fields.
I would like to know how to retrieve username and password values when we click on login in app.R file.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover { opacity: 0.8; }
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Login Form</h2>
<form >
<div class="imgcontainer">
<img src="https://www.cote-azur-ecobiz.fr/upload/docs/image/jpeg/2015-03/exemple.jpg" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
</body>
</html>
app.R
server <- function(input, output) {}
# Run the application
shinyApp(ui = htmlTemplate("www/index.html"), server)
To retrieve user and password you can access input$uname and input$psw. This is the name that appear in your HTML file. To observe the submit button I recommend you to use an action-button instead of a submit one (see for example ?shiny::submitButton).
Here is the HTML file in which I changed the button type and added the id parameter as submit_btn:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover { opacity: 0.8; }
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Login Form</h2>
<form >
<div class="imgcontainer">
<img src="https://www.cote-azur-ecobiz.fr/upload/docs/image/jpeg/2015-03/exemple.jpg" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button id="submit_btn" class="action-button">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
</body>
Here is an app just to check the results:
library(shiny)
server <- function(input, output) {
login <- eventReactive(input$submit_btn,{
user <- input$uname
password <- input$psw
return(c("user" = user, "password" = password))
})
output$login_out <- renderText({
login_data <- login()
sprintf("User: %s; Password: %s", login_data[1], login_data[2])
})
}
ui <- fluidPage(
sidebarLayout(
includeHTML("www/index.html"),
textOutput("login_out")
)
)
shinyApp(ui = ui, server)
Related
I have a problem that I want to solve,the date icon when I set the alignment to the left does not move the icon tried all the ways and no benefit but work with me transform but it needs to reponsive on all screen and I must do it for all screens
.zsg-cp,
.zsg-datepicker-wrapper {
position: relative
}
.zsg-datepicker-wrapper .zsg-datepicker-link {
color: #006AFF;
font-size: 1.34em;
line-height: 1;
position: absolute;
left: 7px;
top: 5px
}
<div class="zsg-datepicker-wrapper">
<input name="dateField" type="text" value="" id="cal1DateField" min="2019-08-22" max="2020-08-22" class="zsg-datepicker">
<a id="wrapper" style="text-align:left;left:0;float:left;transform: translateX(50px);" href="" class="zsg-datepicker-link"><span class="zsg-icon-calendar"></span></a>
</div>
Try this with your own CSS classes
.input-container {
display: -ms-flexbox;
/* IE10 */
display: flex;
width: 100%;
margin-bottom: 15px;
}
.icon {
padding: 10px;
background: dodgerblue;
color: white;
min-width: 50px;
text-align: center;
}
.input-field {
width: 100%;
padding: 10px;
outline: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<form>
<div class="input-container">
<input class="input-field" type="text" placeholder="Date" name="dateField">
<i class="fa fa-calendar icon"></i>
</div>
</form>
http://jsfiddle.net/9FG4f/4/
I tried a different way to line up the labels and textfields in the form area along with the button horizontally, but the email label and txtfield is not aligned perfectly.
HTML
<div class="prefill2">
<h1>Need a Real Estate Expert?</h1>
<form class="action3" name="form1" method="POST" action="_sendmail.php" onSubmit="return CheckAll(this);">
<div id="action3-fname">
<label class="nick-3">Full Name:</label>
<input type="text" class="name2" name="full_name" />
</div>
<div id="action3-email">
<label class="nick-4">Email Address:</label>
<input type="text" class="email2" name="email">
</div>
<div id="action3-button">
<input type="submit" class="btn2" value="JOIN NOW" name="submit">
</div>
</form>
</div>
CSS
#action3-fname {
display:inline-block;
}
#action3-email {
display:inline-block;
}
#action3-button {
display:inline-block;
}
.action3 .name2 {
border:thin #999 solid;
border-radius:5px;
float:left;
height:22px;
margin-bottom:10px;
margin-left: 1px;
margin-top: 8px;
padding: 4px;
width: 210px;
}
.action3 .email2 {
border: thin #999 solid;
border-radius: 5px;
height: 22px;
margin-left: 22px;
margin-top: -8px;
padding: 4px;
width: 210px;
}
.action3 .nick-3 {
color:#000000;
}
.action3 .nick-4 {
margin-left:23px;
color:#000000;
}
.action3 .btn2 {
background: none repeat scroll 0 0 #ff8400;
border: medium none;
border-radius: 5px;
color: #FFFFFF;
cursor: pointer;
font-size: 22px;
font-weight: bold;
height: 40px;
margin-bottom: 15px;
text-align: center;
width: 140px;
margin-left:10px;
}
I'd get rid of the floats and the margin-tops. Like so:
.action3 .email2 {
border: thin #999 solid;
border-radius: 5px;
height: 22px;
margin-left: 22px;
padding: 4px;
width: 210px;
}
Here's a fiddle: http://jsfiddle.net/disinfor/9FG4f/8/
EDIT
Updated with fiddle that closes all tags correctly and combines the first three lines of CSS into a class.
.actionClass {
display:inline-block;
}
<div class="prefill2">
<h1>Need a Real Estate Expert?</h1>
<form class="action3" name="form1" method="POST" action="_sendmail.php" onSubmit="return CheckAll(this);">
<div id="action3-fname" class="actionClass">
<label class="nick-3">Full Name:</label><br />
<input type="text" class="name2" name="full_name" />
</div>
<div id="action3-email" class="actionClass">
<label class="nick-4">Email Address:</label><br />
<input type="text" class="email2" name="email" />
</div>
<div id="action3-button" class="actionClass">
<input type="submit" class="btn2" value="JOIN NOW" name="submit" />
</div>
</form>
</div>
Get rid of the <br>, get rid of the float's and it should all line up nicely.
.action3 .name2 {
border:thin #999 solid;
border-radius:5px;
/* float:left; <-- remove this */
height:22px;
margin-bottom:10px;
margin-left: 1px;
margin-top: 8px;
padding: 4px;
width: 210px;
}
Here is your updated fiddle
I actually made them float left and corrected a couple margins. Button and everything lined up together.
Here's my updated fiddle
#action3-fname {
float:left;
}
#action3-email {
float:left;
}
I´m trying to include a Font Awesome inside my input in left side but I´m not having sucess. I never used awesome fonts to this purporse. Anyone there knows how to include the font inside the input? Thanks!
The font Im trying to include in left side of my input:
<i class="fa fa-user"></i>
My html:
<form action="" method="post">
<input type="text"class="inputs" placeholder="e-mail" />
<br />
<input type="password" class="inputs"placeholder="Password" />
</form>
My css:
inputs:-webkit-input-placeholder {
color: #b5b5b5;
}
inputs-moz-placeholder {
color: #b5b5b5;
}
.inputs {
background: #f5f5f5;
font-family:"bariol_regularregular", Palatino, serif;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
padding: 13px 10px;
width:180px;
margin-bottom: 10px;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
height:20px;
}
.inputs:focus {
background: #fff;
box-shadow: 0px 0px 0px 2px #96842E;
outline: none;
}
This can be achieved with some absolute positioninig. There are two different ways I can think of doing this so I will show you both. Fiddle with both examples here
Method 1
HTML
<label id="email-label">
<input type="text" id="email" placeholder="email here" />
</label>
CSS
#email {
padding-left: 20px;
}
#email-label {
position: relative;
}
#email-label:before {
color: #666;
content:"\f007";
font-family: FontAwesome;
position: absolute;
top: 2px;
left: 5px;
}
Method 2
HTML
<label id="email-label2">
<i class="fa fa-rocket"></i>
<input type="text"id="email2" placeholder="email here" />
</label>
CSS
#email-label2 {
position: relative;
}
#email-label2 .fa-rocket {
color: #666;
top: 2px;
left: 5px;
position: absolute;
}
#email2 {
padding-left: 20px;
}
I purpose this :
HTML
<i class="inside fa fa-user"></i>
<input type="text" class="inp" placeholder="Your account" />
CSS
.inside {
position:absolute;
text-indent:5px;
margin-top:2px;
color:green;
}
.inp {
text-indent:20px;
}
https://jsfiddle.net/ga6j5345/1/
I am working on creating a page which has a fixed links on the top and fixed submit buttons at the bottom. The content in between is scrollable using overflow:auto;
I am noticing, when I reduce the browser window size the scroller slowly disappears.
How can I fix this? Are there any hacks?
I am working Firefox 19.0 and chrome version 26.0.1410.12 and IE9
Here is my code in its entirety:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overflow based Layout</title>
<style type="text/css">
<!--
/* Pretty Stuff
================================== */
/* Zero down margin and paddin on all elements */
* {
margin: 0;
padding: 0;
}
body {
font: 92.5%/1.6"Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
}
h1 {
font-size: 2.4em;
font-weight: normal;
}
h2 {
font-size: 2.0em;
font-weight: normal;
}
p, li {
font-size: 1.4em;
}
h1, h2, p {
margin: 1em 0;
}
#branding h1 {
margin: 0;
}
#wrapper {
background-color: #fff;
}
#branding {
height: 50px;
background-color:#b0b0b0;
padding: 20px;
}
#form-b {
height: 500px;
overflow: auto;
position: fixed;
top: 164px;
width: 98%;
}
#mainNav {
list-style: none;
background-color:#eee;
}
#footer {
background-color:#b0b0b0;
padding: 1px 20px;
}
/* The Core Technique
================================= */
body {
text-align: center;
min-width: 1260px;
}
#wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}
#content {
width: 100%;
float: right;
}
#mainNav li {
/* width: 180px;
float: left; */
display:inline;
}
#submit-b {
border: 0px solid red;
bottom: 77px;
position: fixed;
text-align: cemter;
width: 100%;
}
#footer {
clear: both;
}
/* Add some padding
================================== */
#mainNav {
padding-top: 20px;
padding-bottom: 20px;
position: fixed;
width: 100%;
}
#mainNav * {
padding-left: 20px;
padding-right: 20px;
}
#mainNav * * {
padding-left: 0;
padding-right: 0;
}
#content * {
padding-right: 20px;
}
#content * * {
padding-right: 0;
}
-->
/* fieldset styling */
fieldset {
margin: 1em 0;
/* space out the fieldsets a little*/
padding: 1em;
border : 1px solid #ccc;
background-color:#F5F5F5
}
/* legend styling */
legend {
font-weight: bold;
}
form p {
position: relative;
width: 100%;
}
/* style for labels */
label {
float: left;
width: 10em;
}
#remember-me label {
width: 4em;
}
/* style for required labels */
label .required {
font-size: 0.83em;
color:#760000;
}
/* style error messages */
label .feedback {
position: absolute;
margin-left: 11em;
left: 200px;
right: 0;
font-weight: bold;
color:#760000;
padding-left: 18px;
background: url(images/error.png) no-repeat left top;
}
/* :KLUDGE: Explicitly set the width for IE6- */
* html .feedback {
width: 10em;
}
input {
width: 200px;
}
input[type="text"], textarea {
border-top: 2px solid #999;
border-left: 2px solid #999;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
input.radio, input.checkbox, input.submit {
width: auto;
}
/* style form elements on focus */
input:focus, textarea:focus {
background: #ffc;
}
input.radio {
float: left;
margin-right: 1em;
}
textarea {
width: 300px;
height: 100px;
}
/* Date of Birth form styling */
#monthOfBirthLabel, #yearOfBirthLabel {
text-indent: -1000em;
width: 0;
}
#dateOfBirth {
width: 3em;
margin-right: 0.5em;
}
#monthOfBirth {
width: 10em;
margin-right: 0.5em;
}
#yearOfBirth {
width: 5em;
}
/* Color form styling */
#favoriteColor {
margin: 0;
padding: 0;
border: none;
background: transparent;
}
#favoriteColor h2 {
width: 10em;
float: left;
font-size: 1em;
font-weight: normal;
}
#favoriteColor div {
width: 8em;
float: left;
}
#favoriteColor label {
/*width: 3em;*/
float: none;
display: inline;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="branding">
<h1>Branding</h1>
</div>
<div id="content">
<ul id="mainNav">
<li class="first">
Home
</li>
<li>
About
</li>
<li>
News
</li>
<li>
Products
</li>
<li>
Services
</li>
<li>
Clients
</li>
<li>
Case Studies
</li>
</ul>
<div id="form-b">
<form id="comments_form" action="#" method="post">
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset id="submit-b">
<legend></legend>
<p>
<input id="submit" class="submit" name="submit" type="submit" />
</p>
</fieldset>
</form>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Reduce the padding to 10px:
#content * {
padding-right: 10px; /* Line 106 */
}
OK, so my stupid little login form almost looks how I want it to look. (This is basically my first CSS project ever and first HTML project since updating attempting to update my 15 year old HTML skills.) For the life of me, I can't figure out how to get the "forgot password?" link to move down, either aligned with the middle or bottom of the "Login" button. I've tried moving the display: inline; and vertical-align: middle; to all kinds of different selectors and none of them work! I've even tried setting the height of the anchor and/or the <li> elements. I don't understand what the deal is! Any help is greatly appreciated!
Here is my code:
form.login {
margin: 10px 10px 20px 20px;
padding: 0 0 0 0;
}
form.login fieldset{
margin: 0 0 0 0;
padding: 2px 2px 2px 2px;
border:2px solid;
border-radius: 5px;
width: 348px;
height: 90px;
}
form.login fieldset legend {
font-weight: bold;
font-size: 1.2em;
margin-left: 10px;
}
form.login fieldset ul {
margin: 0;
padding:0;
}
form.login fieldset fieldset {
border: 0;
width: 100%;
height: 40%;
display: inline;
vertical-align: middle;
}
form.login fieldset fieldset li{
float: left;
list-style: none;
width: 165px;
margin: 0 4px 0 4px;
}
form.login input {
width: 165px;
}
form.login label {
display: none;
}
form.login a:link,
form.login a:visited {
color: black;
font-size: 0.8em;
}
form.login a:hover {
color: blue;
}
form.login a:active {
color: blue;
}
form.login fieldset ul fieldset li button#submitLogin {
float: right;
}
and the HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="formstyle.css" />
</head>
<body>
<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="login">
<fieldset>
<legend>Login</legend>
<ul>
<fieldset>
<li>
<label for="email">Email Address</label>
</li>
<li>
<input id="email" type="text" name="email">
</li>
<li>
<label for="password">Password</label>
</li>
<li>
<input id="password" type="password" name="password">
</li>
</fieldset>
<fieldset>
<li>
Forgot Password?
</li>
<li>
<button id="submitLogin" value="submit" name="submitLogin" type="submit">Login</button>
</li>
</fieldset>
</ul>
</fieldset>
</form>
</body>
</html>
EDIT:
Here's a screen shot of what it looks like with the code above.
Try changing:
<li class="middle">
Forgot Password?
</li>
<li class="middle">
<button id="submitLogin" value="submit" name="submitLogin" type="submit">Login</button>
</li>
and add this to your css:
.middle {
height: 22px;
line-height: 22px;
}
This explicitly gives it a set-height and and then through the line-heightproperty tells it to center the text and form objects in the li vertically.
I reworked your markup to remove the fieldsets and to make the style's more consistent. What I am doing here is making the li's all half of the width and height of the UL. That way, if you want to changed the fieldset's height and/or width, you just have to change the one spot and maybe tweak your other styles.
I also condensed and removed some other unnecessary property declarations (padding: 0 0 0 0 to padding: 0). Let me know if you have any questions.
EDIT
I worked on it to make it more consistent between Chrome and Firefox.
And I actually think you'd be better putting the height on the li elements:
http://jsfiddle.net/QRNBg/13/
Try viewing the above and run it while commenting out the display: none on the CSS .hide class declaration.
CSS
form.login {
margin: 10px 10px 20px 20px;
padding: 0;
font-size: 1.2em;
}
form.login fieldset {
margin: 0;
padding: 5px;
border: 2px solid;
border-radius: 9px;
display: inline-block;
}
form.login fieldset legend {
font-weight: bold;
font-size: 1.2em;
margin-left: 10px;
}
form.login fieldset ul {
margin: 0;
padding: 0;
height: 90px;
width: 348px;
}
form.login fieldset ul li {
width: 50%;
height: 45%;
float: left;
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}
form.login input {
border: 1px solid #aaa;
}
form.login input,
form.login li.common a {
width: 93%;
height: 80%;
display: block;
margin: 5px;
font-size: 1em;
}
form.login .hide {
display: none;
}
form.login a:link,
form.login a:visited {
color: black;
font-size: 0.8em;
}
form.login a:hover,
form.login a:active {
color: blue;
}
form.login li.common {
text-align: left;
display: table-cell;
line-height: 2.5em;
}
#submitLogin {
text-align: right;
margin: 0 5px 0 -5px;
}
#submitLogin button {
padding: 5px 8px;
}
HTML
<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="login">
<fieldset>
<legend>Login</legend>
<ul>
<li class="hide">
<label for="email">Email Address</label>
</li>
<li>
<input id="email" type="text" name="email">
</li>
<li class="hide">
<label for="password">Password</label>
</li>
<li>
<input id="password" type="password" name="password">
</li>
<li class="common">
Forgot Password?
</li>
<li id="submitLogin" class="common">
<button value="submit" name="submitLogin" type="submit">Login</button>
</li>
</ul>
</fieldset>
</form>
http://jsfiddle.net/QRNBg/11/
you want it beside the login button, yet you define it in an 'li' tag before the login button? have you tried putting that anchor in the same 'li'? using a 'table' and putting them in the same 'tr' would work for sure.
Here's a quick fix. http://jsfiddle.net/xNAnz/
I offset the li 10px from the top.