Jump to content

odading

Members
  • Posts

    11
  • Joined

  • Last visited

odading's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Hi dsonesuk... I'm sorry I don't understand your explanation. Anyway I try hard to catch what you mean. Here is the code : $to = "my-email-address"; $message = $gender + $comment mail($to,$name,$email,$message); $to is my email address $name is the sender's name $email is the sender's email address $message contains information about sender's gender, sender's comment/message Then that code I should insert it after the function test_input($data) and before the <h2>PHP Form Validation Example</h2> Am I correct or not ? Sorry, i don't understand ... why do I decide the sender's subject of his email message for me ? For exampe, when I receive an email from a friend - I have his subject something like this "I'm coming to your country". Then inside the message is more detail about his coming. Thank you.
  2. Hi Ingolme, I've just read the link and I'm sorry I still don't understand it. I'm thinking like this : The link tell that to send email can use the code : <?php $to = "somebody@example.com"; $subject = "My subject"; $txt = "Hello world!"; $headers = "From: webmaster@example.com" . "\r\n" . "CC: somebodyelse@example.com"; mail($to,$subject,$txt,$headers); ?> Based from the code I found in my first post ---> http://www.w3schools.com/php/showphp.asp?filename=demo_form_validation_complete Should I insert the send email code after the "if if" condition and after the function test_input($data) as followed : <!DOCTYPE HTML> <html> <head> <style> .error {color: #FF0000;} </style> </head> <body> <?php // define variables and set to empty values $nameErr = $emailErr = $genderErr = $websiteErr = ""; $name = $email = $gender = $comment = $website = ""; if ($_SERVER["REQUEST_METHOD"] == "POST") { if (empty($_POST["name"])) { $nameErr = "Name is required"; } else { $name = test_input($_POST["name"]); // check if name only contains letters and whitespace if (!preg_match("/^[a-zA-Z ]*$/",$name)) { $nameErr = "Only letters and white space allowed"; } } if (empty($_POST["email"])) { $emailErr = "Email is required"; } else { $email = test_input($_POST["email"]); // check if e-mail address is well-formed if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { $emailErr = "Invalid email format"; } } if (empty($_POST["website"])) { $website = ""; } else { $website = test_input($_POST["website"]); // check if URL address syntax is valid (this regular expression also allows dashes in the URL) if (!preg_match("/\b(??:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) { $websiteErr = "Invalid URL"; } } if (empty($_POST["comment"])) { $comment = ""; } else { $comment = test_input($_POST["comment"]); } if (empty($_POST["gender"])) { $genderErr = "Gender is required"; } else { $gender = test_input($_POST["gender"]); } } function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; $to = "somebody@example.com"; mail($to,$name,$email,$gender,$comment,$website); } ?> <h2>PHP Form Validation Example</h2> <p><span class="error">* required field.</span></p> <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> Name: <input type="text" name="name" value="<?php echo $name;?>"> <span class="error">* <?php echo $nameErr;?></span> <br><br> E-mail: <input type="text" name="email" value="<?php echo $email;?>"> <span class="error">* <?php echo $emailErr;?></span> <br><br> Website: <input type="text" name="website" value="<?php echo $website;?>"> <span class="error"><?php echo $websiteErr;?></span> <br><br> Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea> <br><br> Gender: <input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female <input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male <span class="error">* <?php echo $genderErr;?></span> <br><br> <input type="submit" name="submit" value="Submit"> </form> <?php echo "<h2>Your Input:</h2>"; echo $name; echo "<br>"; echo $email; echo "<br>"; echo $website; echo "<br>"; echo $comment; echo "<br>"; echo $gender; ?> </body> </html> I insert this code : $to = "somebody@example.com"; mail($to,$name,$email,$gender,$comment,$website); right after the function test_input($data) and before the <h2>PHP Form Validation Example</h2> Am I correct or not, Ingolme ? Thank you.
  3. I found a php code for contact/email form in W3 School : http://www.w3schools.com/php/showphp.asp?filename=demo_form_validation_complete the code is : <!DOCTYPE HTML> <html> <head> <style> .error {color: #FF0000;} </style> </head> <body> <?php // define variables and set to empty values $nameErr = $emailErr = $genderErr = $websiteErr = ""; $name = $email = $gender = $comment = $website = ""; if ($_SERVER["REQUEST_METHOD"] == "POST") { if (empty($_POST["name"])) { $nameErr = "Name is required"; } else { $name = test_input($_POST["name"]); // check if name only contains letters and whitespace if (!preg_match("/^[a-zA-Z ]*$/",$name)) { $nameErr = "Only letters and white space allowed"; } } if (empty($_POST["email"])) { $emailErr = "Email is required"; } else { $email = test_input($_POST["email"]); // check if e-mail address is well-formed if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { $emailErr = "Invalid email format"; } } if (empty($_POST["website"])) { $website = ""; } else { $website = test_input($_POST["website"]); // check if URL address syntax is valid (this regular expression also allows dashes in the URL) if (!preg_match("/\b(??:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) { $websiteErr = "Invalid URL"; } } if (empty($_POST["comment"])) { $comment = ""; } else { $comment = test_input($_POST["comment"]); } if (empty($_POST["gender"])) { $genderErr = "Gender is required"; } else { $gender = test_input($_POST["gender"]); } } function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } ?> <h2>PHP Form Validation Example</h2> <p><span class="error">* required field.</span></p> <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> Name: <input type="text" name="name" value="<?php echo $name;?>"> <span class="error">* <?php echo $nameErr;?></span> <br><br> E-mail: <input type="text" name="email" value="<?php echo $email;?>"> <span class="error">* <?php echo $emailErr;?></span> <br><br> Website: <input type="text" name="website" value="<?php echo $website;?>"> <span class="error"><?php echo $websiteErr;?></span> <br><br> Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea> <br><br> Gender: <input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female <input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male <span class="error">* <?php echo $genderErr;?></span> <br><br> <input type="submit" name="submit" value="Submit"> </form> <?php echo "<h2>Your Input:</h2>"; echo $name; echo "<br>"; echo $email; echo "<br>"; echo $website; echo "<br>"; echo $comment; echo "<br>"; echo $gender; ?> </body> </html> My question is : How do I put my email address so after the user click "submit" button, the information he/she has filled in the form is sent to my email address ? I'm sorry if this is a stupid question, but this thing is very new for me . Thank you.
  4. That's exactly what I want. Thank you very much, dsonesuk.
  5. Hi dsonesuk, Thank you for the codes, but I'm sorry it's not the one that I meant. The one from flexbox code, if I run it in W3School "Tryit Editor v3.0" the result is : A. If under 800px media screen the image is in the first row - the description is in the second row (2 rows). B. If it's 800px media screen (or more) the image is on the left - the desciption is on the right side (1 row 2 column) The code (without flexbox) in my first post (after I ran it in "Tryit Editor") do almost the same like the flexbox code. The different is that at point-A above, I don't know how to center the image within the css only because the result is the image is located on the left. Later on I found from the internet a code for flexbox, where I saw the result is the image in the center. So I "steal" the code (not literally stealing because the code is in the code-pen from a tutorial somewhere in the internet). While your code satisfied me at point-A (under 800px media screen - the image is in the center), but your code at point-B (more than 800px media screen) is still 2 rows... the description is still under the image. Anyway, I really appreciate your time and your code for me. I'm sure that one day I will face other difficulties with my css learning and will ask here in this forum and you are my helper . regards.
  6. I don't know that . Thank you for your information, Ingolme. Sorry, I haven't put the pop-up in the flexbox code of my second post, dsonesuk. Actually the pop-up is not my question but the centering. When I found the flexbox code to center the image, so that's what I want then I share it here ... that's why I haven't put the pop-up code in the post before, which I did add the pop-up later in my webpage. Also I'm sorry as because my poor English that's why it's difficult for me to explain it in English which is of course become soo unclear to all of my reader . Anyway, thank you for telling me about this.
  7. Please never mind the question. I've found from the internet by using flexbox. Here is the code : <!DOCTYPE html> <html> <head> <style> .flex-container { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; font-weight: bold; text-align: center; //justify-content: center; align-items: center; } .flex-container > * { padding: 10px; flex: 1 100%; } .main { text-align: left; //background: cornflowerblue; } .header {background: coral;} .footer {background: lightgreen;} //.aside1 {background: moccasin;} .aside2 {background: violet;} @media all and (min-width: 600px) { .aside { flex: 1 auto; } } @media all and (min-width: 800px) { .main { flex: 10 0px; } .aside1 { order: 1; } .main { order: 2; } .aside2 { order: 3; } .footer { order: 4; } } </style> </head> <body> <div class="flex-container"> <header class="header">Header</header> <aside class="aside aside1"><img src="http://dummyimage.com/300x200/000/fff.gif"></aside> <article class="main"><div align="justify"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.</p> </div></article> <footer class="footer">Footer</footer> </div> </body> </html> Thank you.
  8. Hi, Because I don't know how to do it in css, I use table and put a code which I found from the internet on how to "break" the column into row. <!DOCTYPE html> <html><head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <style> @media only screen and (max-width: 600px) { /* Force table to not be like tables anymore */ table, td, tr {display: block; align: center} } </style> </head> <body> <table cellpadding="10"> <tr> <td> <img src="http://dummyimage.com/240x160/000/fff" alt="" onclick="document.getElementById('modal03').style.display='block'"></div> <div id="modal03" class="w3-modal" onclick="this.style.display='none'"> <span class="w3-closebtn w3-hover-red w3-container w3-padding-16 w3-display-topright">×</span> <div class="w3-modal-content w3-animate-zoom"> <img src="http://dummyimage.com/600x400/000/fff" style="width:100%"> </td> <td> <div align="justify"><b><font color="0000FF">DONGDINGDANG</font></b><br> BLA BLA BLA BLA - BLUBLU<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <br> <br> <a href="#" style="text-decoration: none; color: blue">visit their website</a></div> </td> </tr> </table> </body> </html> A. If the screen below 600px, from the code above, the low-res image is "alone" located on the left of the screen - then under the image is the text. B. If the screen more than 600px, the text under the image goes to the right of the image. (left is the image, right is the text). What I want is on point-A which is : the low-res image location in the center of the screen (while the text still under the image). Is it possible to do that ? or is there css code that can do that without using the table ? Maybe some one can help me to give the code if css can do that ? Any kind of help would be greatly appreciated. Thank you in advanced. regards.
  9. Wow... it works ... Thank you very much dsonesuk. Oke... I learn one more thing from you today. Thank you once again, dsonesuk regards.
  10. Hi, FIrst I want to say thank you for this forum and the W3 school. Today I'm starting to learn css from W3 school. There I found a code for a slideshow and I've been thinking on how to put a caption under each image. A. The code is here : http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_imgdots B. Other W3 code for a slideshow with caption is : http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_caption Although in this slideshow it's not the kind of caption that I want, anyway I've tried to combine the code ( A and B ) - like this : <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <style> .mySlides {display:none} </style> <body> <div class="w3-container"> <h2>Slideshow Indicators</h2> <p>An example of using images to indicate how many slides there are in the slideshow, and which image the user is currently viewing (red border).</p> </div> <div class="w3-content" style="max-width:1200px"> <div class="w3-display-container mySlides"> <img class="mySlides" src="img_nature_wide.jpg" style="width:100%"> <div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black"> Trolltunga, Norway </div> </div> <div class="w3-display-container mySlides"> <img class="mySlides" src="img_fjords_wide.jpg" style="width:100%"> <div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black"> Northern Lights, Norway </div> </div> <div class="w3-display-container mySlides"> <img class="mySlides" src="img_mountains_wide.jpg" style="width:100%"> <div class="w3-display-topleft w3-large w3-container w3-padding-16 w3-black"> Beautiful Mountains </div> </div> <div class="w3-row-padding w3-section"> <div class="w3-col s4"> <img class="demo w3-border w3-hover-shadow" src="img_nature_wide.jpg" style="width:100%" onclick="currentDiv(1)"> </div> <div class="w3-col s4"> <img class="demo w3-border w3-hover-shadow" src="img_fjords_wide.jpg" style="width:100%" onclick="currentDiv(2)"> </div> <div class="w3-col s4"> <img class="demo w3-border w3-hover-shadow" src="img_mountains_wide.jpg" style="width:100%" onclick="currentDiv(3)"> </div> </div> </div> <script> var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" w3-border-red", ""); } x[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " w3-border-red"; } </script> </body> </html> How ever after I click any of the thumbnail, the larger image is not showed up while it did display the caption. Is it possible to put a caption on each image in this kind of sildeshow ? I've also had tried to code like this : <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <style> .mySlides {display:none} </style> <body> <div class="w3-container"> <h2>Slideshow Indicators</h2> <p>An example of using images to indicate how many slides there are in the slideshow, and which image the user is currently viewing (red border).</p> </div> <div class="w3-content" style="max-width:1200px"> <img class="mySlides" src="img_nature_wide.jpg" style="width:100%">AAA <img class="mySlides" src="img_fjords_wide.jpg" style="width:100%">BBB <img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">CCC <div class="w3-row-padding w3-section"> <div class="w3-col s4"> <img class="demo w3-border w3-hover-shadow" src="img_nature_wide.jpg" style="width:100%" onclick="currentDiv(1)"> </div> <div class="w3-col s4"> <img class="demo w3-border w3-hover-shadow" src="img_fjords_wide.jpg" style="width:100%" onclick="currentDiv(2)"> </div> <div class="w3-col s4"> <img class="demo w3-border w3-hover-shadow" src="img_mountains_wide.jpg" style="width:100%" onclick="currentDiv(3)"> </div> </div> </div> <script> var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" w3-border-red", ""); } x[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " w3-border-red"; } </script> </body> </html> The result is the one that I want (the text is under the image), but too bad... the first image show all the text AAA BBB and CCC the second image show the text BBB and CCC the third image show the text CCC Is it possible to put a text under each image in this kind of sildeshow ? Any kind of help would be greatly appreciated. Thank you in advanced and I'm sorry for my broken English. regards.
×
×
  • Create New...