Hello I am unable to align the button with the above text box on right side. There is no effect to set the margin of the fieldset.
Below is my code.
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<title>Document</title>
<style>
*{
box-sizing: border-box;
}
.container{
max-width:520px;
max-height:180px;
background-color:antiquewhite;
}
fieldset{
max-width:518px;
max-height:178px;
padding-right:15px;
padding-left:15px;
}
/*.form-group{
max-width:518px;
}*/
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class ="col-sm-6 col-sm-offset-3 form-box">
<form role="form" action method="post" class="registration-form"
style="width:482px;height:175px;background-color:aqua;margin-left:5px;margin-right:5px;"
>
<fieldset><!--Start 2nd form field set-->
<div class="form-bottom">
<div class="form-group" style="margin-left:5px;margin-right:5px;margin-top:20px;width:100%;padding-right:5px;padding-left:5px;" >
<input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control" id="form-email">
</div><!--End of 2nd form groupdiv-->
<button type="button" class="btn btn-primary btn-next" style="margin-top:20px;margin-bottom:20px;margin-left:10px;padding-right:15px;width:100%">Get Started</button>
</div><!--End of bottom div-->
</fieldset><!--End of second form fieldset-->
</form>
</body>
</html>
Please fix the problem and tell me when we set the margin of fieldset 10px from right side then it will br the boundary of fieldset of 110px for element? Is it ok or there is any other concept?
try this
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
.container {
max-width: 520px;
max-height: 180px;
background-color: antiquewhite;
}
fieldset {
max-width: 518px;
max-height: 178px;
padding-right: 15px;
padding-left: 15px;
}
/*.form-group{
max-width:518px;
}*/
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<form role="form" action method="post" class="registration-form" style="width:482px;height:175px;background-color:aqua;margin-left:5px;margin-right:5px;padding-left: 20px;padding-right: 20px;">
<fieldset>
<!--Start 2nd form field set-->
<div class="form-bottom">
<div class="form-group" style="margin-top:20px;width:100%;">
<input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control" id="form-email">
</div>
<!--End of 2nd form groupdiv-->
<button type="button" class="btn btn-primary btn-next" style="margin-top:20px;margin-bottom:20px;padding-right:15px;width:100%">Get Started</button>
</div>
<!--End of bottom div-->
</fieldset>
<!--End of second form fieldset-->
</form>
</body>
</html>
Related
The example code shows an input field with an Input Group Label. The background color of the Input Group Label is already set by default.
I need to modify this to an own RGB value. For example: #646464
I tried to modify the background color of the <span> and the <div> as you can see in the CSS code, but none of them solved my problem. The background color of the Input Group Label remains the same.
.myDivClass {
background-color: #FF0000;
}
.mySpanClass {
background-color: #00FF00;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<form>
<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
<div class="input-group-append myDivClass">
<span class="input-group-text mySpanClass">#example.com</span>
</div>
</div>
</form>
</div>
</body>
</html>
You can do something like this.
.myDivClass {
background-color: #FF0000;
}
span.mySpanClass {
background-color: #00FF00;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<form>
<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
<div class="input-group-append">
<span class="mySpanClass input-group-text">#example.com</span>
</div>
</div>
</form>
</div>
</body>
</html>
I put a background image and I'm using a card at the middle of the page. I've a white bar that come across all the screen and I don't know how to remove it.
Here is a screenshot:
Here is my code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<style type="text/css">
#media (min-width: 768px) {
html{
background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
}
</style>
<body>
<div class="container" style="background-color: transparent;">
<main style="background-color: transparent;">
<div class="col-md-12" style="background-color: transparent;">
<div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red">
<div class="card-body" >
<h6 class="card-title text-center">Connexion</h6>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div><br/>
<div class="text-center">
<a class="btn btn-primary" href="index.html">Se connecter</a>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
Change your background to be set to the body instead of html:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<style type="text/css">
#media (min-width: 768px) {
body{
background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
}
</style>
<body>
<div class="container" style="background-color: transparent;">
<main style="background-color: transparent;">
<div class="col-md-12" style="background-color: transparent;">
<div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red">
<div class="card-body" >
<h6 class="card-title text-center">Connexion</h6>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div><br/>
<div class="text-center">
<a class="btn btn-primary" href="index.html">Se connecter</a>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
Add transparent to your body as well
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<style type="text/css">
#media (min-width: 768px) {
html{
background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
}
</style>
<body style="background-color: transparent">
<div class="container" style="background-color: transparent">
<main style="background-color: transparent;">
<div class="col-md-12" style="background-color: transparent;">
<div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red">
<div class="card-body" >
<h6 class="card-title text-center">Connexion</h6>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div><br/>
<div class="text-center">
<a class="btn btn-primary" href="index.html">Se connecter</a>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
there is background color in your body tag.
you can set background color to transparent.
body {
background-color: transparent;
}
The issue is caused by this line which is associated with the head tag.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
Use the below code and the issue will be fixed. The change that I made is, I changed the background property of the body to transparent which was assigned by default by the above tag. Now it works perfectly. Hope it helps.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<style type="text/css">
#media (min-width: 768px) {
html{
background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
body{
background-color: transparent;
}
}
</style>
<body>
<div class="container" style="background-color: transparent;">
<main style="background-color: transparent;">
<div class="col-md-12" style="background-color: transparent;">
<div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red">
<div class="card-body" >
<h6 class="card-title text-center">Connexion</h6>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div><br/>
<div class="text-center">
<a class="btn btn-primary" href="index.html">Se connecter</a>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
I attach a snipped below, as you can see, the 2 buttons show a different height, I would like them to have the same height when I change the page size, and be on the same line.
I don't want to just say height: 100px, because when I open it on a phone it would deform.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.dropbtn {
background-color: #264653;
border: none;
color: white;
padding: 0.1%;
text-align: center;
cursor: pointer;
width: 100%;
flex-grow: 1;
display: block;
}
.dropdown {
position: relative;
display: block;
width: 100%;
}
</style>
</head>
<body>
<h1 align="center" style="padding-left: 20px; width: 100%">ANNOTATION TOOL</h1>
<div style="width: 100%; height: 100%;" class="container-fluid">
<div class="dropdown" style="width: 50%; float:left; height: 100%;">
<button class="dropbtn" style="width: 100%; height:100%;"><h2>File: 2019717_1828_FMCI_107.txt Device 107 </h2> </button>
</div>
<div class="dropdown" style="width: 50%; float:right; height: 100%;">
<button class="dropbtn" style="height: 100%;"><h2> Channel:0 <i class="fa fa-caret-down"></i></h2> </button></div>
</body>
Thank you very much for your help.
you can use bootstrap container for it:
<!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">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Title</title>
</style>
</head>
<body>
<h1 align="center" style="padding-left: 20px; width: 100%">ANNOTATION TOOL</h1>
<div class="container">
<div class="row">
<div class="col-sm">
<button type="button" class="btn btn-primary" style="width: 100% " >Primary</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-primary" style="width: 100% "> Primary</button>
</div>
</div>
</div>
<div style="width: 100%; height: 100%;" class="container-fluid">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
check: https://jsfiddle.net/pk78ntze/
I have a 3 sections in my html
textarea
lable and below 2 buttons
road button
How can I make everything resizible and have seconds section fixed so it doesn't resize (label and below 2 buttons) and have 3 button Road go on the right and doesn't move, it should be fixed.
So in the nutshell, textarea should be resizible and seconds section and button the right should be fixed.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="main_section" class="container">
<div class="cstm-item d-flex">
<div class="">
<textarea name=""></textarea>
</div>
<div class="h-100 text-center">
<span>LEFT RIGHT</span>
<div>
<button><i class="fa fa-minus"></i></button>
<button><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
<div>
<button><i class="fa fa-road"></i></button>
</div>
</div>
</body>
</html>
This solution would work. Let me know if there is anything wrong in UI alignment.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
.solution {
display: flex;
align-items: center;
}
.solution > div {
padding: 0 10px;
}
.solution > div:first-of-type {
flex-grow: 1;
}
textarea {
width: 100%;
}
</style>
<body>
<div id="main_section" class="container">
<div class="solution">
<div>
<textarea class="item-text-area" name=""></textarea>
</div>
<div>
<span>LEFT RIGHT</span>
<div>
<button><i class="fa fa-minus"></i></button>
<button><i class="fa fa-plus"></i></button>
</div>
</div>
<div>
<button><i class="fa fa-road"></i></button>
</div>
</div>
</div>
</body>
</html>
Briefly, i want to change the color of an outline of a fieldset to a color of my choice (blue for example) instead of the default grey outline color.
And this happens when i click on the (input) field:
Note CSS property does not work
I use this code
fieldset {
border: 2px solid blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="legned.css">
<!-- Latest compiled and minified CSS -->
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<link rel="stylesheet" href="https://cdn.rtlcss.com/bootstrap/v4.2.1/css/bootstrap.min.css" integrity="sha384-vus3nQHTD+5mpDiZ4rkEPlnkcyTP+49BhJ4wJeJunw06ZAp+wzzeBPUXr42fi8If" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.rtlcss.com/bootstrap/v4.2.1/js/bootstrap.min.js" integrity="sha384-a9xOd0rz8w0J8zqj1qJic7GPFfyMfoiuDjC9rqXlVOcGO/dmRqzMn34gZYDTel8k" crossorigin="anonymous"></script>
<title>Bootstrap Legned</title>
</head>
<body>
<fieldset class="border p-2 w-25 mr-auto ml-2">
<legend class="w-auto">First Name</legend>
<input name="text1" type="text" />
</fieldset>
<fieldset class="border p-2 w-25 mr-auto ml-2">
<legend class="w-auto">Last Name</legend>
<input name="text1" type="text" />
</fieldset>
</body>
</html>
The illustrations are attached below:
Before click on input
After click on input
You should fix how you're importing your Bootstrap as well, but when I removed .border, your CSS worked after adding !important to make sure it overrides the inherited Bootstrap CSS.
fieldset {
border: 2px solid blue !important;
}
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<fieldset class="p-2 w-25 mr-auto ml-2">
<legend class="w-auto">First Name</legend>
<input name="text1" type="text" />
</fieldset>
<fieldset class="p-2 w-25 mr-auto ml-2">
<legend class="w-auto">Last Name</legend>
<input name="text1" type="text" />
</fieldset>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
Just add an empty div to the fieldset and style it this way:
fieldset {
border: none;
position: relative;
margin-bottom: 0.5em;
}
input:focus ~ div {
border: 2px solid blue;
}
fieldset > div {
height: calc(100% - 0.5em);
width: 100%;
position: absolute;
top: 0.5em;
left: 0;
border: 2px solid lightgray;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="legned.css">
<!-- Latest compiled and minified CSS -->
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<link rel="stylesheet" href="https://cdn.rtlcss.com/bootstrap/v4.2.1/css/bootstrap.min.css" integrity="sha384-vus3nQHTD+5mpDiZ4rkEPlnkcyTP+49BhJ4wJeJunw06ZAp+wzzeBPUXr42fi8If" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.rtlcss.com/bootstrap/v4.2.1/js/bootstrap.min.js" integrity="sha384-a9xOd0rz8w0J8zqj1qJic7GPFfyMfoiuDjC9rqXlVOcGO/dmRqzMn34gZYDTel8k" crossorigin="anonymous"></script>
<title>Bootstrap Legned</title>
</head>
<body>
<fieldset class="p-2 w-25 mr-auto ml-2">
<legend class="w-auto">First Name</legend>
<input name="text1" type="text" />
<div></div>
</fieldset>
<fieldset class="p-2 w-25 mr-auto ml-2">
<legend class="w-auto">Last Name</legend>
<input name="text1" type="text" />
<div></div>
</fieldset>
</body>
</html>