Skip to main content

Picnic form with simple html and css

If you want to make picnic form with simple html and css this where you are in write place.  Form

Form for Picnic tour




The source code is..... but wait don't copy and past it. other ways you will never learn to code try to understand the code and copy by writing the code with own finger means with own keyboard Okay.


<html lang="en">

<head>
    <meta charset="UTF-8"></meta>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <title>Form</title>
</head>

<body>
    <div>
        <h1>Form for Picnic tour</h1>
        <form action="form.php">
            <input placeholder="Enter Your Name" type="text" /><br />
            <label for="sectionida">
                <input id="sectionida" name="section" type="radio" value="Section a" /> Section A
            </label>
            <label for="sectionidb">
                <input id="sectionidb" name="section" type="radio" value="Section b" /> Section B
            </label>
            <label for="sectionidc">
                <input class="red blue" id="sectionidc" name="section" type="radio" value="Section c" /> Section C
            </label><br />
            <input class="red" id="foodcanteen" name="canteen" type="checkbox" />
            <label for="foodcanteen">Want Food Canteen card</label><br />
            <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input -->
            <textarea cols="30" id="explain" name="explain" placeholder="Explain why you want to join "                         rows="10"></textarea>
            <select id="car" name="car">

                <option value="no-food">Select your food</option>
                <option value="vegitarian">vegitarian</option>
                <option value="Non-veg">Non-veg</option>
                <option value="vegan">vegan</option>
          
            </select>
        </form>
    </div>
   <div class="pic" ><img  src="https://scontent.fpat3-2.fna.fbcdn.net/v/t1.6435-                     9/101576061_126858662362904_5604900074665541632_n.jpg?_nc_cat=104&ccb=1-            7&_nc_sid=e3f864&_nc_ohc=9VfVVH_1Ru8AX9f6XlS&_nc_ht=scontent.fpat3-    2.fna&oh=00_AfDHX_P9hPI7gWOj47rKW1kRj6yLNX7EODrQ79NV8IPq1g&oe=63BA2882"                 width="150px" alt=""> </div>
    </body>
    <input type="Reset" value="Reset"/>
    <input type="submit" value= "submit"/>

</html>

Comments

Popular posts from this blog

Image Mapping in html

So we are going to see today the Image mapping. Let's take have a simple practical look at this Properties So, what you have do is  First touch in computer ..... you will land in other site . now second touch the mobile phone you will land in different site . and last touch the coffee and magically you will land in different site . So, this is because of the image mapping properties. If you want the source code so here is this. <!doctype html> <html> <head> <title> image mapping </title> </head> <body> <img src="https://www.w3schools.com/html/workplace.jpg" height="379px" width=" 400px" usemap="#workmap"> <map name="workmap"> <area shape="rect" coords="30,41,280,350" href="https://www.w3schools.com/html/html_images_imagemap.asp"/> <area shape="rect" coords="288,169,337,246" href="https://www.w3schools.com/html/phone....

How to increase Typing Speed in upto 100wpm

 a quick brown fox jumps over the lazy dog How to Increase typing speed The only way to type fast is through touch typing without this you can't be able to cross 40wpm but if you had learn to type without looking to the keyboard than, yes you can even cross 200wpm with ease So, now the question arises how to learn touch typing The best to learn touch typing 1. go to the website called edclub.com this is the best platform for learning touch typing 2. Practice at least 20 minutes in a day. 3. Consistency is very much important in learning this skill   Hope you like this post thanks