html formulier doet het niet

Status
Niet open voor verdere reacties.

RobkeDePee

Nieuwe gebruiker
Lid geworden
20 jan 2018
Berichten
3
Om één of andere reden krijg ik mijn html formulier niet in orde. Heb al met vanalle php-scripts geprobeerd maar krijg het niet in orde, kan iemand mij helpen?

De code:

HTML:
<!-- BOOTSTRAP -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <form class="offerte">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label for="naam">Voor- en achternaam</label>
            <input class="form-control" type="text" id="naam">
          </div>
          <div class="form-group">
            <label for="bedrijf">Bedrijfsnaam</label>
            <input class="form-control" type="text" id="bedrijf">
          </div>
          <div class="form-group">
            <label for="email">Emailadres</label>
            <input class="form-control" type="email" id="email">
          </div>
          <fieldset class="form-group">
            <label>Ik wil mijn offerte ontvangen: </label>
            <div class="form-check">
              <label class="form-check-label">
                <input onclick="document.getElementById('adres').disabled = true;" type="radio" class="form-check-input" name="optionsRadios" id="viamail" value="viamail"> via email
              </label>
            </div>
            <div class="form-check">
              <label class="form-check-label">
                <input onclick="document.getElementById('adres').disabled = false;" type="radio" class="form-check-input" name="optionsRadios" id="inbrievenbus" value="inbrievenbus"> in mijn brievenbus
              </label>
            </div>
          </fieldset>
          <fieldset id="adres" disabled>
            <label>Adresgegevens</label>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="textinput">Straatnaam</label>
              <div class="col-sm-10">
                <input type="text" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label" for="textinput">Huisnummer</label>
              <div class="col-sm-3">
                <input type="text" class="form-control">
              </div>
              <label class="col-sm-2 control-label" for="textinput">Bus</label>
              <div class="col-sm-4">
                <input type="text" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="textinput">Postcode</label>
              <div class="col-sm-4">
                <input type="text" class="form-control">
              </div>
              <label class="col-sm-2 control-label" for="textinput">Gemeente</label>
              <div class="col-sm-4">
                <input type="text" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="textinput">Land</label>
              <div class="col-sm-10">
                <input type="text" value="België" class="form-control">
              </div>
            </div>
          </fieldset>
          <div class="form-group">
            <label for="email">Tel./GSM-nummer</label>
            <input class="form-control" type="tel" id="tel">
          </div>
          <fieldset class="form-group">
            <label>Website: </label>
            <div class="form-check">
              <label class="form-check-label">
                <input onclick="document.getElementById('anderewebsite').disabled = true;" type="radio" class="form-check-input" name="optionsRadios" id="geenwebsite" value="geenwebsite" checked> Ik heb nog geen website
              </label>
            </div>
            <div class="form-check">
              <label class="form-check-label">
                <input onclick="document.getElementById('anderewebsite').disabled = false;" type="radio" class="form-check-input" name="optionsRadios" id="alwebsite" value="alwebsite"> Ik heb al een website
              </label>
            </div>
          </fieldset>
          <div class="form-group">
            <label for="anderewebsite">URL</label>
            <input class="form-control" type="url" placeholder="https://uwdomein.be" id="anderewebsite" disabled>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-check">
            <label class="form-check-label">Welke opties moet uw website bevatten</label>
            <br>
            <input class="form-check-input" type="checkbox" value="meerderemail"> Meerdere e-mail accounts
            <br>
            <input class="form-check-input" type="checkbox" value="meertalig"> Meertalige website
            <br>
            <input class="form-check-input" type="checkbox" value="extradomein"> Extra domeinnaam
            <br>
            <input class="form-check-input" type="checkbox" value="speciaaldomein"> Speciale domeinnaam
            <br>
            <input class="form-check-input" type="checkbox" value="social"> Social stream
            <br>
            <input class="form-check-input" type="checkbox" value="csm"> Wordpress
            <br>
            <input class="form-check-input" type="checkbox" value="contactformulier"> Contactformulier
            <br>
            <input class="form-check-input" type="checkbox" value="fotoshow"> Fotoshow
            <br>
            <input class="form-check-input" style="margin-bottom: 20px;" type="checkbox" value="analyser"> Analyseer uw website
          </div>
          <div class="form-group">
            <label for="activiteiten">Welke activiteiten houdt uw zich bezig?</label>
            <textarea class="form-control" id="activiteiten" rows="8"></textarea>
          </div>
          <div class="form-group">
            <label for="omschrijvingproject">Omschrijf uw website-project zo volledig mogelijk</label>
            <textarea class="form-control" id="omschrijvingproject" rows="8"></textarea>
          </div>
          <button type="submit" class="btn knop-rood-vol" style="float: right;">Verzenden</button>
        </div>
      </div>
    </form>
  </div>
</div>
 
Wat lukt er niet aan? Ik zie wel dat je het action-attribuut en de method-attribuut mist. Dus je bent je er van bewust dat alle data nu via de URL gestuurd wordt?
 
Ik pak mijn glazen bol erbij, en ik start hem even op....




M.a.w: Hier kunnen we niks mee. Wees eens wat duidelijker.
 
Laatst bewerkt:
Heb voorbeeldjes vanop internet geprobeerd maar ik krijg het niet in de juiste formatie.. heb het PHP bestand ook al weg gegooid.. moet ik zo’n PHP bestand gebruiken?
 
Als je het formulier wilt afhandelen is PHP wel zeker handig. HTML is een enkel een opmaaktaal, een geen uitvoerende taal.

Maar het script moet ook aansluiten op je formulier, dus een random script zal niet zo snel werken.
Je zult dan in ieder geval je script erop moeten aanpassen.

Dus laat eens zien wat je geprobeerd hebt, en waar je exact op vast loopt. Dan kunnen we je gericht helpen.
 
Laatst bewerkt:
Met de html die je geeft krijg je het niet werkend. Hieronder heb ik wat verschillende velden gezet. De overige velden moet je op dezelfde manier ertussen zetten, maar elk met een eigen name, for en id, die uniek moeten zijn.
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Formulier</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<div class="row">
<form class="offerte col-xs-12" method="post" action="offerteform.php" enctype="multipart/form-data" role="form">
<div class="row">
<div class="col-md-6">
  <fieldset class="form-group" style="margin-bottom:0">
    <h3 style="margin-top:0">Uw gegevens</h3>
    <div class="form-group">
      <label  for="naam">Voor- en achternaam *</label>
      <input name="naam" id="naam" type="text" class="form-control" value="">
    </div>
    <div class="form-group">
      <label  for="email">Emailadres *</label>
      <input name="email" id="email" type="email" class="form-control" value="">
    </div>
    <div class="form-group">
      <label>Ik wil mijn offerte ontvangen</label>
      <div class="radio">
        <label><input name="ontvangvia" onclick="disableElement('#adres input',true);" type="radio" value="viamail" id="viamail" checked="checked">via email</label>
      </div>
      <div class="radio">
        <label><input name="ontvangvia" onclick="disableElement('#adres input',false);" type="radio" value="viapost" id="viapost">via post</label>
      </div>
    </div>
  </fieldset>
  <fieldset class="form-group" id="adres" style="margin-bottom:0">
    <h3 style="margin-top:0">Adresgegevens</h3>
    <div class="form-group">
      <label  for="straat">Straatnaam</label>
      <input name="straat" id="straat" type="text" class="form-control" value="" disabled>
    </div>
    <div class="form-group">
      <div class="col-md-5" style="padding:0">
        <label  for="postcode">Postcode</label>
        <input name="postcode" id="postcode" type="text" class="form-control" value="" disabled>
      </div>
      <div class="col-md-2" style="padding:0"></div>
      <div class="col-md-5" style="padding:0">
        <label  for="gemeente">Gemeente</label>
        <input name="gemeente" id="gemeente" type="text" class="form-control" value="" disabled>
      </div>
    </div>
  </fieldset>
  <fieldset class="form-group" style="margin-bottom:0">
    <div class="form-group">
      <label>Website</label>
      <div class="radio">
        <label><input name="website" onclick="disableElement('#anderewebsite',true);" type="radio" value="geenwebsite" checked="checked">Ik heb nog geen website</label>
      </div>
      <div class="radio">
        <label><input name="website" onclick="disableElement('#anderewebsite',false);" type="radio" value="welwebsite">Ik heb al een website</label>
      </div>
    </div>
    <div class="form-group">
      <label  for="anderewebsite">URL van website</label>
      <input name="anderewebsite" id="anderewebsite" type="url" class="form-control" value="" disabled>
    </div>
  </fieldset>
</div><!--//col-md-6-->
<div class="col-md-6">
  <fieldset class="form-group" style="margin-bottom:0">
    <h3 style="margin-top:0">De website</h3>
    <div class="form-group">
      <label>Welke opties moet uw website bevatten</label>
      <div class="checkbox">
        <label><input name="meerderemail" value="meerderemail" type="checkbox">Meerdere e-mail accounts</label>
      </div>
      <div class="checkbox">
        <label><input name="meertalig" value="meertalig" type="checkbox">Meertalige website</label>
      </div>
      <div class="checkbox">
        <label><input name="extradomein" value="extradomein" type="checkbox">Extra domeinnaam</label>
      </div>
    </div>
    <div class="form-group">
      <label for="activiteiten">Welke activiteiten houdt uw zich bezig?</label>
      <textarea name="activiteiten" id="activiteiten" class="form-control" rows="8"></textarea>
    </div>
    <div class="form-group clearfix">
      <button name="submit" id="submit" type="submit" class="btn btn-success pull-right">Verzenden</button>
    </div>
  </fieldset>
</div><!--//col-md-6-->
</div>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
function disableElement(element, disabled) {
  $(element).attr('disabled', disabled);
  if (disabled) $(element).val('');
}
</script>
</body>
</html>
edit: disabelen van inputs heb ik onderaan in <script> gezet, dat werkt handiger.

Dit is alleen de html. Zoals hierboven aangegeven is er een php script nodig voor de afhandeling.

Suc6. Have fun.
 
Laatst bewerkt:
Ik volg volledig bron (ps er bestaat ook een htmltag)

citaat: zie lijn met <form class="offerte col-xs-12" method="post" action="offerteform.php" enctype="multipart/form-data" role="form">

denk ook aan html5

patern kan je weglaten omdat hij ander het formulier niet zal versturen zie ook required is de nieuwe mannier om aan te duiden dat iets dient ingevuld te zijn.
LET OP firefox en ook andere browsers zullen (naar gelang de instelling ) het formulier niet versturen als deze niet voldoet(en is als aanvulling nadien)
HTML:
<div class="form-group">
    <label class="" for="username">gebruikersnaam:</label>
    <input type="text" class="" name="username" autocomplete="off" value="uw naam" pattern="[A-Za-z0-9]{2,}" required>
    <span class="input_info">info info info</span>
</div>
<div class="form-group">
    <label class="" for="email" >email :</label>
    <input type="email" class="" name="email" value="email" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$" required>
    <span class="input_info">%input_info.required%:%input_info.email%</span>
</div>
css het ik achterwege gelaten maar met css3 kan je ook de required:de layout aanpassen...

volgend script zou je kunnen gebruiken voor te testen =>php
PHP:
<?php
//als je dit leest bij het uitvoeren... werkt je phpinterpreter niet en kan je die niet uit laten voeren.
if(isset($_GET)){
  print_r($_GET);
}
if(isset($_POST)){
  print_r($_POST);
}
if(isset($_SERVER)){//deze enkel lokaal gebruiken of in niet zichtbare delen (beveiliging)
  //print_r($_SERVER);
}
 
Laatst bewerkt:
@kenikavabis. Je aanvulling bij de html is prima maar de class'es die je erbij zet zijn verwarrend omdat de TS een bootstrap formulier maakt.

RE: css het ik achterwege gelaten
CSS hoef je bij bootstrap niet zelf te maken :) dat is allemaal al gedaan in bestand bootstrap.min.css

Het handige php (hulp)scriptje hierboven krijgt de naam "offerteform.php" met de iets specifiekere inhoud:
Code:
<?php
if (isset($_POST['submit'])) {
    // toon alle velden van het formulier
    print_r($_POST);
}
?>
Suc6. Have fun.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.

Nieuwste berichten

Terug
Bovenaan Onderaan