Demo 5 - Kalatori: yhteys (lomake)
- Kalatori-sivuston seuraavana osana toteutetaan "yhteys"-osio
- Lisää kalatori-sivuston kansioon yhteys.html ja yhteys.css
- Linkitä yhteys.css ja common.css
<![CDATA[
html_css_basics
|
├── demos
| |
│ └── d5_kalatori
| |
│ ├── yhteys.html
│ ├── yhteys.css
│ ├── hinnasto.html
│ ├── hinnasto.css
│ ├── markkinat.html
│ ├── markkinat.css
│ ├── header.html
│ ├── header.css
│ ├── common.css
| |
│ └─── img
│ │ ├── kuva_1.jpg
│ │ └── kuva_2.jpg
|
]]>
Tehtävä
- Tee HTML section-elementti, jonka id on yhteys
- Lisää otsikko Ota yhteyttä
- Toteuta mallin mukainen yhteydenottolomake (form)
- Katso mallia erilaisten syötekenttien (input) tekoon w3schools
- Lisää lomakkeen action-kenttään lähetysosoite
https://tredu-form-app.herokuapp.com/lomakedemo.php
- Jos klikkaat lähetysosoitetta, sen pitäisi sanoa "No Message"
- Muista käyttää lomakkeen lähettämiseen POST-metodia
Esimerkki lomakkeesta (form), jonka sisällä on yksi syötekenttä (input) ja lähetysnappi (submit):
<![CDATA[
<form action="https..." method="POST">
<label for="name">First Name</label>
<input type="text" id="name" name="name" placeholder="Your name..">
<input type="submit" value="Lähetä">
</form>
]]>
Lomakkeen input-kenttien name-parametrit tulee olla samat,
kuin lomakkeen vastaanottavassa nettisivussa on määritelty
| Päiväys |
name="date" |
| Pöytä |
name="tableid" |
| Nimi |
name="fullname" |
| Sähköposti |
name="email" |
| Viesti |
name="message" |
Kokeile lomakkeen toimintaa:
Täytä ja lähetä lomake
Firefoxilla päädyt sivulle, joka näyttää vastaanotetun sisällön:
Tarkista, että kaikki lähetetty tieto tuli perille.
Data on esitetty nettisivulla JSON-muodossa, jota tulette käyttämään myöhemmillä kursseilla
Chromen näkymä on hieman erilainen, mutta sisältää saman datan:
Valmis sivu:
Ja jos kiinnostaa, niin tässä vielä php-koodi joka vastaanottaa ja käsittelee lomakkeen tiedot:
<![CDATA[
<?php
header('Content-Type: application/json; charset=utf-8');
$myObj = new stdClass();
$myObj->message = 'No Message';
if (isset($_POST['date'])){
$myObj->date = $_POST['date'];
}
if (isset($_POST['tableid'])){
$myObj->tableid = $_POST['tableid'];
}
if (isset($_POST['fullname'])){
$myObj->fullname = $_POST['fullname'];
}
if (isset($_POST['email'])){
$myObj->email = $_POST['email'];
}
if (isset($_POST['message'])){
$myObj->message = $_POST['message'];
}
echo json_encode($myObj, JSON_UNESCAPED_UNICODE);
]]>