FORME I TABELEeeee

<DOCTYPE html>
<head>
<title>Web tabele i forme</title>
<meta charset = "UTF-8">
</head>
    <body>
    <p>width ="300" širina 300 px</p>

        <table width ="300" border="4" cellspacing ="1" cellpadding = "5">
    <tr>
        <td>1</td>
        <td  colspan = "2">2</td>
    </tr>
    <tr>
        <td  colspan = "2">4</td>
        <td>6</td>
    </tr>
        <tr>
        <td>7</td>
        <td>8</td>
        <td rowspan = "2">9</td>

    </tr>
        <tr>
                <td rowspan = "2">10</td>
        <td>11</td>


    </tr>
        <tr>

        <td>14</td>
        <td>15</td>
    </tr>

    ---------------------------------------------------------------------------------------------
    <p>cellpadding se dodaje širinama kolona, širina kolone se prenosi na celu vertikalu</p>
    <p>align atribut za td elemente po default-u ima vrednost left, a za th ćelije zaglavlja center</p>

        <table border="4" cellspacing ="5" cellpadding = "2" bgcolor="red">
        <caption>Naslov tabele</caption>
          <tr bgcolor = "yellow">
            <th width ="100" align = "left">1</th>
            <th width ="100" >2</th>
            <th width ="300" >3</th>
          </tr>
          <tr>
            <td rowspan= "2" colspan = "2" bgcolor="blue">4</td>

            <td align="right">6</td>
          </tr>
          <tr>
            <td align="center" bgcolor ="#FF9900">9</td>
          </tr>

        </table>

-------------------------------------------------------------------------------------------
<style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }

            th, td {
                padding: 5px;
            }

            th {
                text-align: left;
            }

        </style>
        ide na pocetku vazi za sve

        ------------------------------------------------------------------


        <table id="t01">
    <tr>
        <td>1</td>
        <td  colspan = "2">2</td>
    </tr>
    <tr>
        <td  colspan = "2">4</td>
        <td>6</td>
    </tr>
        <tr>
        <td>7</td>
        <td>8</td>
        <td rowspan = "2">9</td>

    </tr>
        <tr>
                <td rowspan = "2">10</td>
        <td>11</td>


    </tr>
        <tr>

        <td>14</td>
        <td>15</td>
    </tr>
        -*---------------------------------------------------------
                <style>
            table {
                width:100%;
            }

            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }

            th, td {
                padding: 5px;
                text-align: left;
            }

            table#t01 {
                width: 100%;
                background-color: #f1f1c1;
            }

            table#t01 tr:nth-child(even) {
                background-color: #eee;
            }


            table#t01 tr:nth-child(odd) {
               background-color:#fff;
            }

            table#t01 th    {
                background-color: black;
                color: white;
            }

        </style>

    </head>
    <body>

        <table style="width:100%">
          <tr>
            <th>Ime</th>
            <th>Prezime</th>
            <th>Poeni</th>
          </tr>
          <tr>
            <td>Petar</td>
            <td>Petrović</td>
            <td>50</td>
          </tr>
          <tr>
            <td>Sima</td>
            <td>Simić</td>
            <td>94</td>
          </tr>
          <tr>
            <td>Laza</td>
            <td>Lazić</td>
            <td>80</td>
          </tr>
        </table>

        <br>

        <table id="t01">
          <tr>
            <th>Ime</th>
            <th>Prezime</th>
            <th>Poeni</th>
          </tr>
          <tr>
            <td>Petar</td>
            <td>Petrović</td>
            <td>50</td>
          </tr>
          <tr>
            <td>Sima</td>
            <td>Simić</td>
            <td>94</td>
          </tr>
          <tr>
            <td>Laza</td>
            <td>Lazić</td>
            <td>80</td>
          </tr>
        </table>
        ----------------------------------------------------------------------------------------
        ---------------------------------------------------------------------------------------
        -----------------------------------------------------------------------------------------
                <form action ="skripta.php" method ="post"  name="form1" id ="form1"   >
            <fieldset>
                <legend>Licni podaci:</legend>

                <label for ="ime">Vaše ime:</label>
                <input type ="text" name="ime" id ="ime"/>

                <label for ="prezime">Vaše prezime:</label>
                <input type ="text" name="prezime" id ="prezime"/>
            </fieldset>

            <fieldset>
                <legend>Logovanje:</legend>

                <label for ="kor_ime">Vaše korisničko ime:</label>
                <input type ="text" name="kor_ime" id ="kor_ime"/>

                <label for ="lozinka">Vaša lozinka:</label>
                <input type ="p" name="lozinka" id ="lozinka"/>

            </fieldset>

            <input type = "checkbox"  name ="mailovi" id="mailovi" value="mailovi"/>
            <label for ="mailovi">Želim da primam obaveštenja.</label>
            <input type = "submit" name ="submit" id ="submit" value ="Snimi informacije"/>
            -------------------------------------------------------------------------------
            <body style="font-size:16px">


<br>
    <form action="test.php" method="GET">
      <select name="automobili">
        <option value="volvo">Volvo</option>
        <option value="sab">Sab</option>
        <option value="fiat" selected>Fiat</option>
        <option value="audi">Audi</option>
      </select>
      <br><br>
      <input type="submit" value = "Klikni me">
    </form>
------------------------------------------------------------------------------<br>

    <form action ="skripta.php" method ="post"  name="form1" id ="form1"   >
            <fieldset>
                <legend>Licni podaci:</legend>

                <table>
                    <tr>
                        <td width = "140">
                            <label for ="ime">Vaše ime:</label>
                        </td>
                        <td>
                            <input type ="text" name="ime" id ="ime"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for ="prezime">Vaše prezime:</label>
                        </td>
                        <td>
                            <input type ="text" name="prezime" id ="prezime"/>
                        </td>
                    </tr>

                </table>

            </fieldset>

            <fieldset>
                <legend>Logovanje:</legend>

                <table>
                    <tr>
                        <td width = "140">
                            <label for ="kor_ime">Vaše korisničko ime:</label>
                        </td>
                        <td>
                            <input type ="text" name="kor_ime" id ="kor_ime"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for ="lozinka">Vaša lozinka:</label>
                        </td>
                        <td>
                            <input type ="p" name="lozinka" id ="lozinka"/>
                        </td>
                    </tr>

                </table>

            </fieldset>

            <br /><br />

            <input type = "checkbox"  name ="mailovi" id="mailovi" value="mailovi"/>
            <label for ="mailovi">Želim da primam obaveštenja.</label>

            <br /><br />
            <input type = "submit" name ="submit" id ="submit" value ="Snimi informacije"/>


        </form>
        ---------------------------------------------------------------------------
        -------------------------------------------------------------------------------
                <form action="test.php">
          <textarea name="poruka" rows="10" cols="30">
Neki tekst....
          </textarea>
          <br><br>
          <input type="submit" value = "Klikni me !">
        </form>

        -----------------------------------------------------------------
        -------------------------------------------------------------------------------------------
        --------------------------------------------------------------------------------------------

                <button type="button" onclick="alert('Zdravo svete!')">Klikni me!</button>


        -----------------------------------------------------------------
        -------------------------------------------------------------------------------------------
        --------------------------------------------------------------------------------------------
        <form action="test.php" method="get">

      <input list="browsers" name="browser">

          <datalist id="browsers">
            <option value="Internet Explorer">
            <option value="Firefox">
            <option value="Chrome">
            <option value="Opera">
            <option value="Safari">
          </datalist>

      <input type="submit" value = "Izaberi">

    </form>
    -------------------------------------------------------------------------------------------------------
    ------------------------------------------------------------------------------------------
        <body style="font-size:16px">

    <form action="test.asp" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
      0
      <input type="range"  id="a" name="a" value="50">
      100 +
      <input type="number" id="b" name="b" value="50">
      =
      <output name="x" for="a b"></output>
      <br><br>
      <input type="submit">
    </form>
    ------------------------------------------------------------------------------------------
    ---------------------------------------------------------------------------------------------
        PASSWORD


                <form action="test.php" method= "GET">

            Korisničko ime:<br>
            <input type="text" name="userid" >
            <br>
            Lozinka:<br>
            <input type="password" name="psw">
            <br>
            <input type="submit" value = "Potvrdi">

        </form>


        -----------------------------------------------------------------------------------
        -------------------------------------------------------------------------------------
        CHECKBOX


                <form action = "test.php" method = "get">

            <input type="checkbox" name="vozilo1" value="Bicikla" checked> Ja imam biciklu
            <br>
            <input type="checkbox" name="vozilo2" value="Auto"> Ja imam auto
            <br>
            <input type ="submit" value = "Izaberi">

            <br>

        </form>
        ---------------------------------------------------------------------------------
        --------------------------------------------------------------------------------
        NUMBER
        NUMBER
                <form action="test.php" method= "get">
          Broj izmedju 1 i 5:
          <input type="number" name="quantity" min="1" max="5" required>
          <br>
          Brojevi od 0 do 100 sa korakom od 10:
          <input type="number" name="points" min="0" max="100" step="10" value="30">
          <br>
          <input type ="submit" value="Unesi">
                ---------------------------------------------------------------------------------
        --------------------------------------------------------------------------------
                ---------------------------------------------------------------------------------
        --------------------------------------------------------------------------------
        DATUMI
        DATUMI
                <form action = "test.php" action = "get">
          Rodjendan:
          <input type="date" name="bday">
          <br>
          Unesi datum pre: 1980-01-01:
          <input type="date" name="bday" max="1979-12-31" value ="1978-12-10"><br>
          Unesi datum posle: 2000-01-01:
          <input type="date" name="bday" min="2000-01-02"><br>

          <input type="submit" value ="Klikni">

        </form>

                        ---------------------------------------------------------------------------------
        --------------------------------------------------------------------------------
                ---------------------------------------------------------------------------------
        --------------------------------------------------------------------------------
        BOJA

                <form action = "test.php" method = "get">
          Izaberite boju:
          <input type="color" name="favcolor">
          <input type ="submit">
        </form>

                                ---------------------------------------------------------------------------------
        --------------------------------------------------------------------------------
                ---------------------------------------------------------------------------------
        --------------------------------------------------------------------------------

        RANGE
            <body style="font-size:16px">

        <form action ="test.php" method ="get">
          <input type="range" name="points" min="0" max="10" value ="8">
          <br>
          <input type = "submit" value = "Klikni">

        </form>
                                        ---------------------------------------------------------------------------------
        --------------------------------------------------------------------------------
                ---------------------------------------------------------------------------------
        --------------------------------------------------------------------------------

        MONTH WEEK


                <form>

          Izaberite datum (mesec i godina):
          <input type="month" name="bdaymonth">
          <br>
          Izaberite nedelju:
          <input type="week" name="week_year">
            </form>

                                                ---------------------------------------------------------------------------------
        --------------------------------------------------------------------------------
                ---------------------------------------------------------------------------------
        --------------------------------------------------------------------------------

        TIME
        <form action ="test.php">
      Vreme:
      <input type="time" name="usr_time">
      <input type ="submit">

    </form>


                                                        ---------------------------------------------------------------------------------
        --------------------------------------------------------------------------------
                ---------------------------------------------------------------------------------
        --------------------------------------------------------------------------------
        EMAIL


        <form action = "test.php" method="get">
      E-mail:
      <input type="email" name="mail">
      <br>
      <br>
      <input type = "submit" value ="Potvrdi">

    </form>

                                                            ---------------------------------------------------------------------------------
        --------------------------------------------------------------------------------
                ---------------------------------------------------------------------------------
        --------------------------------------------------------------------------------
        URL

            <body style="font-size:16px">

        <form action = "test.php" method = "get">
          Unesite web sajt:
          <input type="url" name="homepage">
          <br>
          <input type ="submit" value ="Unesi">

        </form>
                                                                                                    ---------------------------------------------------------------------------------
        --------------------------------------------------------------------------------
                ---------------------------------------------------------------------------------
        --------------------------------------------------------------------------------
        OBRAZAC

            <p>Neki obrazac:</p>

        <p>
            <var>E</var> = <var>m</var>
            <var>v</var>
            <sup>2</sup>
        </p>

        -----------------------------------------------------------------------------------------------------
        -------------------------------------------------------------------------------------------------------
        DOMACI
        <!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <table width="100%">
            <tr>
                <th colspan="4">1. Licni podaci</th>


                <th colspan="2">2. Podaci za prijavu</th>

            </tr>
            <tr>
                <td>Pol*</td>
                <td colspan="3"><form>Gdin<input type="radio"name="mpol">Gdja<input type="radio"name="zpol"></form></td>


                <td>Lozinka*</td>
                <td><input type="text"name="lozinka"></td>
            </tr>
            <tr>
                <td>Titula</td>
                <td colspan="4"><input type="text"name="titula"></td>


                <td><p>(8-20 znakova ukljucuju brojeve i slova)</p></td>
            </tr>
            <tr>
                <td>Ime*</td>
                <td colspan="3"><input type="text"name="ime"></td>


                <td>Jacina lozinke</td>
                <td><input type="text"name="jacina"></td>
            </tr>
            <tr>
                <td>Prezime*</td>
                <td colspan="3"><input type="text"name="prezime"></td>


                <td>Potvrdite lozinku*</td>
                <td><input type="text"name="potLozinka"></td>
            </tr>
            <tr>
                <td>Ulica i broj*</td>
                <td colspan="3"><input type="text"name="adresa"></td>


                <td>Sigurnosno pitanje*</td>
                <td>
                    <form>
                        <select name="opcija">
                        <option value="Odaberite pitanje"select="selected">Odaberite pitanje!</option>
                        <option value="Odaberite pitanje1">Odaberite pitanje!1</option>
                        <option value="Odaberite pitanje2">Odaberite pitanje!2</option>
                        <option value="Odaberite pitanje3">Odaberite pitanje!3</option>
                        </select>
                    </form>
                </td>
            </tr>
            <tr>
                <td>Broj poste i mesto*</td>
                <td><input type="text"name="brposte"></td>
                <td colspan="2"><input type="text"name="mesto"></td>

                <td>Vas odgovor*</td>
                <td><input type="text"name="odgovor"></td>
            </tr>
            <tr>
                <td>Drzava*</td>
                <td colspan="5">
                    <form>
                    <select name="drzava">
                    <option value="Srbija">Srbija</option>
                    <option value="Srbija">Srbija</option>
                    <option value="Srbija">Srbija</option>
                    </select>
                    </form>
                </td>


            </tr>
            <tr>
                <td>Valuta*</td>
                <td colspan="3">
                <form>
                    <select name="valuta">
                    <option value="valuta">Evro</option>
                    <option value="valuta">Dolar</option>
                    <option value="valuta">Dinar</option>
                    </select>
                    </form>
                </td>


                <td colspan="2"><input type="checkbox" name="vehicle" value="Bike">Zapamti prijavu</td>

            </tr>
            <tr>
                <td>Datum rodjenja*</td>
                <td>
                    <form>
                    <select name="valuta">
                    <option value="valuta">1</option>
                    <option value="valuta">2</option>
                    <option value="valuta">3</option>
                    </select>
                    </form>
                </td>
                <td>
                    <form>
                    <select name="valuta">
                    <option value="valuta">1</option>
                    <option value="valuta">2</option>
                    <option value="valuta">3</option>
                    </select>
                    </form>
                </td>
                <td>
                    <form>
                    <select name="valuta">
                    <option value="valuta">1</option>
                    <option value="valuta">2</option>
                    <option value="valuta">3</option>
                    </select>
                    </form>
                </td>
                <td colspan="2"><input type="checkbox" name="vehicle" value="Bike">Prihvatam...</td>

            </tr>
            <tr>
                <td>Gmail</td>
                <td colspan="5"><input type="text"name="mejl"></td>


            </tr>
            <tr>
                <td>Broj mobilnog</td>
                <td><input type="text"name="+381"value="+381"></td>
                <td><input type="text"name="tel1"></td>
                <td colspan="3"><input type="text"name="tel2"></td>


            </tr>
            <tr>
                <td>Telefon</td>
                <td><input type="text"name="+3812"value="+381"></td>
                <td><input type="text"name="tel21"></td>
                <td colspan="3"><input type="text"name="tel22"></td>


            </tr>
        </table>
    </body>

</html>