Criar um formulário de pedido HTML

Estou a tentar criar este formulário html, mas estou a ter problemas em Redimensionar o campo e a legenda. Sou novo na programação e prática em alguns formulários html. Eu quero que quando a janela é redimensionada, o formulário deve tomar o tamanho da janela, mas não para deslocar o conteúdo. Com o meu código abaixo, os campos de entrada e as opções são sempre deslocados e não em linha quando a janela é redimensionada. Ficaria feliz se alguém me pudesse ajudar.

a HTML: 

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="bestell.css">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<fieldset class="fieldset">
    <legend id="one">
        <img src="http://www.myhomematic.de/images/manufacturers/mediola-
logo-trans.png" class="image">
    </legend>
    <h1>Bestellantrag</h1>
    <p>(für Investitionsgüter über € 400)</p>
    <label for="antragssteller" class="">Antragssteller:</label>
    <input type="text" value="" class="imput">
    <!--<p>Name</p>-->
    <label for="abteilung" class="abteilung_space">Abteilung:</label>
    <input type="checkbox" class="begin1"> R&D
    <input type="checkbox" class="begin1"> Marketing<br>
    <input type="checkbox" class="begin21"> Operation
    <input type="checkbox" class="begin22"> Vertrieb<br>
    <input type="checkbox" class="begin3"> Admin
</fieldset><br><br>
<div>
    <label for="Anschaffungswert">Anschaffungswert:</label>
    <input type="text" value="" class="none">
    <label for="Zeitpunkt" class="even">Zeitpunkt:</label>
    <input type="text" value="" class="none"><br><br><br>
</div>
<div>
    <table>
        <tr>
            <td>
                <label for="investitionsart"
class="investion">Investitionsart:</label>
                <input type="checkbox" name="" value="" class="one"/> 
Neuinvestition
                <input type="checkbox" name="" value="" class="one"/> 
Projekt
                <input type="checkbox" name="" value="" class="one"/> 
 Testequipment<br><br><br>
            </td>
        </tr>
        <tr>
            <td>
                <label for="intern" class="somethin">Intern:</label>
                <input type="checkbox" name="" value="" class="one1"/> 
Ersatzbeschaffung
                <input type="checkbox" name="" value="" class="one11"/>
veraltet
                <input type="checkbox" name="" value="" class="one12"/> 
defekt<br><br><br>
            </td>
        </tr>
    </table>
</div>
<div>
    <label for="Bestellung">Bestellung:</label>
     <input type="text" value="" class="now1"><br>
    <input type="text" value="" class="odd"><br>
    <input type="text" value="" class="odd"><br><br><br>
</div>
<div>
    <label for="Begründung">Begründung:</label>
    <input type="text" value="" class="now"><br>
    <input type="text" value="" class="odd"><br>
    <input type="text" value="" class="odd"><br><br><br>
</div>
<div>
    <label for="erfolgt">Bestellung erfolgt bei:</label>
    <input type="text" value="" class="different"><br><br><br>
</div>
<div>
    <table>
        <tr>
            <td>
                <label for="bestellung" class="definite">Bestellung:</label>
                <input type="checkbox" name="" value="" class="one2"> 
genehmigt
                <input type="checkbox" name="" value="" class="one2"> 
abgelehnt<br><br><br>
            </td>
        </tr>
    </table>
</div>
<div>
    <label for="datum">Datum:</label>
    <input type="text" value="" class="">
    <label for="Unterschrift" class="even2">Unterschrift:</label>
    <input type="text" value="" class=""><br><br><br>
</div>
<div>
    <label for="abgelehnt">Begründung wenn abgelehnt:</label>
    <input type="text" class="last" >
</div>
</body>
</html>
Por favor, não se preocupem com os nomes das minhas aulas, só os nomeio para os Poder pentear...Qualquer conselho sobre se tornar um bom programador é muito bem-vindo

O Estilo 

body{
text-align: center;
font-family: arial;
margin: 0px;
height: 100%;
}
.fieldset{
display:inline;
border: solid 1px black;
}
label{
text-align: center;
}
h1{
letter-spacing: 4px;
font-size: 30px;
font-family: inherit;
margin-right: 600px;
}
p{
margin-right: 610px;
}
input[type="text"]{
width: 320px;
border: none;
border-bottom: 1px solid black;
transition: 0.3s;
display: inline;
height: 19px;
margin-top: 13px;
}
input[type="checkbox"]{
margin-top: 15px;
text-align: center;
}
legend{
width: 262px;
margin-left: 650px;
}
.image{
width: 300px;
}
.odd{
margin-left: 125px;
width: 790px !important;
}
.even{
margin-left: 40px;
}
.none{
margin-left: 0px;
}
.even2{
margin-left: 120px;
}
.last{
width: 400px !important;
margin-left: 10px;
}
.begin1{
margin-left: 60px;
}
.begin2{
margin-left: 300px;
}
.begin21{
margin-left: 612px;
}
.begin22{
margin-left: 22px;
}
.begin3{
margin-left: 485px;
}
.one{
margin-left: 133px;
}
.one1{
 margin-left: 190px;
}
.one11{
margin-left: 101px;
}
.one12{
margin-left: 132px;
}
.last{
width: 690px !important;
}
.different{
width: 743px !important;
margin-left: 10px;
}
.now{
width: 789px !important;
margin-left: 29px;
}
.now1{
width: 790px !important;
margin-left: 39px;
}
.one2{
margin-left: 158px;
}
.abteilung_space{
margin-left: 39px;
}
.imput{
margin-left: 20px;
}
.investion{
margin-left: 125px;
}
.definite{
margin-left: 121px;
}
.somethin{
margin-left: 63px;
}

At the end I should get something like this

actualização:

Adicionando um jsfiddle para ajudar a visualizar o problema https://jsfiddle.net/jsallans/ok2qf1jo/

Author: Brian Tompsett - 汤莱恩, 2015-10-28
Source

1 answers

Se o requisito é o formulário deve ter o tamanho da janela, usando uma tabela html para layout e coluna tamanho percentual pode ser usado.

<div style='min-width: 800px'>
    <table style='width: 100%'>
      <tr>
        <td style='width: 25%;'><input type='checkbox' />&nbsp;Checkbox 1</td>
        <td style='width: 25%;'><input type='checkbox' />&nbsp;Checkbox 2</td>
        <td style='width: 25%;'><input type='checkbox' />&nbsp;Checkbox 3</td>
        <td style='width: 25%;'><input type='checkbox' />&nbsp;Checkbox 4</td>
      </tr>
    </table>
    <table style='width: 100%'>
      <tr>
        <td style='width: 100px; min-width: 100px;'>Label&nbsp;1: </td>
        <td style='width: 50%; border-bottom: solid 1px black;'></td>
        <td style='width: 100px; min-width: 100px; padding-left: 20px;'>Label&nbsp;2: </td>
        <td style='width: 50%; border-bottom: solid 1px black'></td>
      </tr>
    </table>
</div>

Uma nova nota:

  • a largura mínima é utilizada para evitar uma largura demasiado pequena e a embalagem dos elementos
  • a tabela tem 100% de largura para preencher toda a Página
 1
Author: Martin Staufcik, 2015-10-28 00:49:29