How can i convert this to an wordpress new page. I tried to add it tru html but that didn't work. My dropdown is all mest up. Nothing seems to be good. Can anyone help me out please?
Are point me in the wright direction. Are show me a preview how i can fix this problem.
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Smoelenboek</title>
<link rel="stylesheet" href="css/bootstrap-theme.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/default.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/tablesorter.js"></script>
<script id="data" type="text/javascript" src="js/search.js" xmlData="data/raetexport.xml"></script>
</head>
<body>
<STYLE TYPE="text/css">
body { background-image:url('background-alert-ipad.jpg'); }
</style>
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<div id="controller">
<label class="control-label" for="searchinput"><Font color="#FFFFFF">Zoeken:</font>
<input type="text" id="term">
</label>
<div class="control-group">
<div class="controls">
<label class="control-label"><Font color="#FFFFFF">Opties:</font>
<select name="category" id="category">
<option value="none">Selecteer een optie</option>
<option value="roepnaam">Voornaam</option>
<option value="naamMedewerker">Achternaam</option>
<option value="team">Team</option>
</select>
</label>
</div>
</div>
</div>
</div>
</div>
<input name="Zoeken" type="button" id="searchButton" value="Search">
</fieldset>
</form>
<div id="result"> </div>
</body>
</html>
This was the correct fix.
Insert HTML Snippet WordPress plugin is the solution, It Adds HTML,
CSS and JavaScript code to your pages and posts easily. – user3599534
1 hour ago
Thank you.
Related
I am using bootstrap 5 and bootstrap-select .
I have a PSD like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-select.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
<div class="col-md-6 mx-auto">
<label for="color_id">Colors</label>
<select class="form-control selectpicker" id="color_id" name="color_id[]" data-live-search="true">
<option value="1" data-content="<span class=badge bg-danger>Red</span>">
Red
</option>
<option value="2" data-content="<span class=badge bg-warning>Warning</span>">
Warning
</option>
</select>
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap-select.js"></script>
</body>
</html>
When I open the inspact I see this code
I see that these codes are missing
bg-danger
But I see this demo.
[3
Both the text color is white and the background color is white. Nothing is clear.
Use this for multiple classes:
<option value="1" data-content="<span class='badge bg-danger'>Red</span>">
Red
</option>
You didn't use the quotation marks here:
class="badge bg-danger"
I am trying to get the selection box below the canvas. I have tried a number of combinations but have not prevailed. I am using paper.js for the canvas. Also, I know that having the names of colors like I have them is bad but this is a rough prototype site so cut me some slack please. Thank you.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#simonwep/pickr/dist/themes/classic.min.css" /> <!-- 'classic' theme -->
<link rel="stylesheet" type="text/css" href="WEBSITE.css">
<!-- Load the Paper.js library -->
<script type="text/javascript" src="node_modules/paper/dist/docs/assets/js/paper.js"></script>
</head>
<body>
<script src="displayTable.js"></script>
<canvas id="mycanvas" resize></canvas>
<label for="backgroundTable">Color for background of table:</label>
<form action="website.php" method="post">
<div class="form">
<select name="userBackgroundSelect" id="userBackgroundSelect">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="purple">Purple</option>
</select>
</div>
<div>
<input type="submit">
</div>
</form>
</body>
</html>
I have a problem when creating a form with boostrap. especially on select. Please help:(
<div class="form-group">
<label for="jenis_pendidikan" class="col-md-2 control-label">Jenis Pendidikan</label>
<div class="col-md-6">
<select id="jenis_pendidikan" class="form-control" name="jenis_pendidikan">
<option>SD</option>
<option>SMP</option>
<option>SMA/SMK</option>
<option>Perguruan Tinggi</option>
</select>
</div>
</div>
Result:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<link href="https://fonts.googleapis.com/css?family=Catamaran:100|Luckiest+Guy|Quicksand:300|Asap:700|Montserrat:700|Open+Sans|Roboto|Signika:700" rel="stylesheet"/>
</head>
<body>
<div class="form-group">
<div class="col-md-6">
<label for="jenis_pendidikan">Jenis Pendidikan</label>
<select id="jenis_pendidikan" class="form-control" name="jenis_pendidikan">
<option>SD</option>
<option>SMP</option>
<option>SMA/SMK</option>
<option>Perguruan Tinggi</option>
</select>
</div>
</div>
</body>
</html>
Have a look at the above snippet it is work.
You need to put the label just above your select.
Hope this helps!
Pardon my web skills but i have a very rudimentary problem.
I have this html form which should ideally call my /login url with post but for some reason it always sends a get request to that url and fails. I can't figure out how that is happening.
This is my html form
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Login - MobileMedic</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="">
<meta name="author" content="" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,800italic,400,600,800" type="text/css">
<link rel="stylesheet" href="./css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="./css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="./css/jquery-ui-1.9.2.custom.min.css" type="text/css" />
<link rel="stylesheet" href="./css/App.css" type="text/css" />
<link rel="stylesheet" href="./css/Login.css" type="text/css" />
<link rel="stylesheet" href="./css/custom.css" type="text/css" />
<script src="./js/jquery-1.9.1.min.js"></script>
<script src="./js/alert.js"></script>
<script src="./js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/plugins/parsley/parsley.js"></script>
</head>
<body>
<div class="gifload"></div>
<div id="login-container">
<div id="logo">
<img src="./images/logos/logo-login.png" alt="Logo" />
</div>
<div id="login">
<h3>Welcome to Apprick Technologies.</h3>
<h5>Please sign in to get access.</h5>
<form method="post" action="/login" id="login-form" class="form parsley-form" data-validate="parsley">
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Email" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Password" required="required">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn-block" name= "Signin" value="Signin"/>
</div>
</form>
</div>
</div>
<!-- /#login-container -->
</body>
To make the question more clear i use express js with parse.com and here are the two routing defined
app.get('/login', function(req, res) {
res.send('get is called');
});
app.post('/login', function(req, res) {
res.send('post is called');
});
Now no matter what i provide in my form method i always get "get is called" in the browser on submitting the button.
I also tried to debug what is happening in by the developer console and this is what i get
I tried your code and it is working as a "POST" request. Try changing your request to "GET" and you can notice in the URL that it has something like this at the end "?Signin=Signin".
Include a "name" attribute to your input tags.
Sample:
<input type="email" name="email" class="form-control" id="email" placeholder="Email" required="required">
And you can see something like this upon submitting the form:
/login?email=testemail%40test.test&Signin=Signin
I am trying to create a bootstrap select list in a html file using Dreamweaver CS6 preview. I have the following code that should work, but it doesn't show the select box as it should - when you select an item a tick should appear next to that item. Also the appearance of the box looks different to the example on http://silviomoreto.github.io/bootstrap-select/.
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../css/bootstrap-theme.css" rel="stylesheet" type="text/css">
<link href="../css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="../bootstrap-select.css" rel="stylesheet" type="text/css">
<link href="../bootstrap-select.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<span class="label label-default">Default</span>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-select.min.js"></script>
<script> $('.selectpicker').selectpicker(); </script>
<select class="selectpicker" multiple data-selected-text-format="count>3">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
<option>Onions</option>
</select>
<form action="welcome.php" method="post">
Name: <input type="text" name="name">
<br>
E-mail: <input type="text" name="email">
<br> <input type="submit">
</form>
</body>
</html>
I don't see any problem with your code. Here's a working fiddle:
http://jsfiddle.net/cuovoqzw/
HTML:
<h1>Hello, world!</h1>
<span class="label label-default">Default</span>
<select class="selectpicker" multiple data-selected-text-format="count>3">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
<option>Onions</option>
</select>
<form action="welcome.php" method="POST">
Name: <input type="text" name="name">
<br />
E-mail: <input type="email" name="email">
<br />
<input type="submit">
</form>
JS:
$('.selectpicker').selectpicker();
The most probable reason I see is that you've included multiple instances of Bootstrap CSS files in your code. Just include only the required ones and delete the rest.