Day 5 , 30 July 2023

Hey, Everyone,

Hope uh all are doing good.

Today was a good day and I learned many things as I progressed further in web dev. the first one I learned is how to create a table on a web page using HTML.

to insert a table we've to use the table tag at first and then to add the top row in bold letters, we'll use thead tag, then tr, and then th tags. After closing these nested tags in thead. Then we'll add lower layers, for that we'll use tbody, then tr and td tags as used below. Similarly to add a footer we've to use tfoot and then tr, th tags as we can see in the below code. Basically, th tag adds an element in a table in bold letters.

Later, I created a payment form. Learned many things form that too.

You can see that after the given code.

<br>
<table>
    <thead>
        <tr>
            <b>
            <th>Name</th>
            <th>section</th>
            <th>student id</th>
            <th>percentage(in%)</th>
            </b>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Ashish</th>
            <td>1A</th>
            <td>202251024</th>
                <td>94.4</td>
        </tr>
        <tr>
            <td>Ashish</th>
            <td>1A</th>
            <td>202251024</th>
                <td>93.8</td>
        </tr>
        <tr>
            <td>ashu</th>
            <td>1C</th>
            <td>202251024</th>
                <td>98.2</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th colspan="2">average</th>
            <th>95.4</th>
        </tr>
    </tfoot>
</table>

<select name="one of these" id="4">
    <option value="section 1A"></option>
    <option value="section 1B"></option>
    <option value="section 1C"></option>
</select>

</body>
</html>

On July 30th, I delved into the world of payment processing and successfully crafted a payment form using HTML. Let me walk you through the process!

To begin with, just like we do for creating a table in HTML, we start with the basic structure of an HTML page using the <!DOCTYPE html> declaration. Next, we set the language and other necessary meta tags within the <head> element.

Now comes the exciting part - building the payment form! We use the <form> tag to create a form where users can input their payment details.


Let me explain the structure of the form:

  1. The form begins with a header, denoted by the <h1> tag, welcoming users to the payment form.
  2. We then add a small note using the <p> tag to indicate that certain fields are required (marked with a *).
  3. The form is divided into two sections: "Contact Info" and "Payment Info."
  4. In the "Contact Info" section, users can input their name, gender (using radio buttons), address, email, and pin code.
  5. The "Payment Info" section allows users to select their card type from a dropdown menu (created using the <select> and <option> tags). Users can also input their card number, expiration date, and CVV (Card Verification Value).
  6. Finally, a "Pay Now" button (using <input type="submit">) is provided for users to submit their payment.

And that's it! With these simple HTML elements and tags, I've successfully crafted a functional payment form for my website. This form allows users to securely enter their payment details, paving the way for seamless online transactions.

I'm thrilled with the progress I made in web development on July 30th. I'm eager to explore more and continue learning to enhance my skills in building exciting web applications. Stay tuned for more updates on my web development journey!

Until next time,

Jaani               

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment from</title>
</head>
<body>
    <form action="">
        <h1>Payment form</h1>
        <p><sup>*</sup>Required field</p>
        <h2>contact info</h2>
        <p>Name:* <input type="text" name="name" required></p>

        <legend>Gender:*</legend>
        <p>
            Male <input type="radio" name="gender" id="male" required>
            Female <input type="radio" name="gender" id="female" required>
        </p>
       
        <p>
            Address <textarea name="Address" id="" cols="30" rows="10"></textarea>
        </p>
        <p>
            email:* <input type="email" name="email" id="" required>
        </p>
        <p>
            pincode:* <input type="number" name="pincode" id="" required>
        </p>

        <hr>

        <h2>Payment info</h2>
        <p>
            card type*
            <select name="card" id="" required>
                <option value="">
                    --select a card type--
                </option>
                <option value="Rupay">Rupay</option>
                <option value="visa">visa</option>
                <option value="mastercard">mastercard</option>
            </select>
        </p>
        <p>
            Card no.* <input type="number" name="card no." id="none" required>
        </p>
        <p>
            Expiration date* <input type="date" name="exp_date" required>
        </p>
        <p>
            CVV* <input type="password" name="CVV" id="CVV" required>
        </p>
        <p><input type="submit" value="Pay now" required></p>

    </form>
</body>
</html>

 



#WebDevelopment

#WebDesign

#FrontEndDevelopment

#BackEndDevelopment

#FullStackDevelopment

#JavaScript

#HTML

#CSS

#UIUX

#Coding

#Programming

#WebDeveloper

#CodeNewbie

#WebDevLife

#CodeLife

#TechCommunity

#TechTalks

#DeveloperHumor

#CodeSnippets

#ResponsiveDesign

 

 

Comments

Post a Comment

Popular posts from this blog

Day #3 WebDev

 Log 28 July, This is what I've done and learned today, p --> paragraph tag b --> bold tag hr --> tag for horizontal line i --> italic text h1>h2>h3>h4>h5>h6 text size tags <!-- tag for comment --> <small> tag for small letter </small> s --> tag for crossing line on sentence/strike through br -->tag for new paragraph/line <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > woofscode </ title > </ head > < body >     < h1 > Ashish Tetarwal welcomes you here &lt; h1 &gt; </ h1 >     < h2 > Ashish Tetarwal welcomes you here </ h2 >     < h3 > Ashish Tetarwal welcomes you here </ h3 >     < h4 > Ashish Tetarwal welcomes you here ...
Read more