HTML Forms

სხვადასხვა საიტებზე რეგისტრაციისას ჩვენ ვავსებთ ფორმას. HTML ფორმას თავისთავად არავითარი მოქმედების შესრულება არ შეუძლია. ფორმაში შეტანილი მონაცემების გაგზავნას და დამუშავებას ასრულებს სხვადასხვა სკრიპტები (გავეცნობით PHP-ის შესწავლისას).


მოკლე ფორმის ნიმუშის კოდი:

<form name="form" action="#" method="">
            <p>
                <label for="firstname">თქვენი სახელი:</label>
                <input id="firstname" type="text" name="firstname" placeholder="შეიყვანეთ სახელი" />
            </p>
            <p>
                <label for="surname">თქვენი გვარი:</label>
                <input id="surname" type="text" name="surname" placeholder="შეიყვანეთ გვარი" />
            </p>
            <p>
                <label for="password">თქვენი პაროლი:</label>
                <input id="password" type="password" name="password" />
            </p>
            <p>
                <label for="email">თქვენი ფოსტა:</label>
                <input id="email" type="email" name="email" />
            </p>
            <p>
                <label for="message">შეტყობინება:</label>
                <textarea id="message" name="message">ჩემი შეტყობინება</textarea>
            </p>           
            <p>
                <input type="reset" value="გასუფთავება" />
                <input type="submit" name="submit" value="გაგზავნა" />
            </p>
    </form>

სრული ნიმუშის კოდი:

<form name="form" action="script.php" method="get" enctype="multipart/form-data">
        <fieldset>
            <legend>ძირითადი მონაცემები</legend>
            <p>
                <label for="firstname">თქვენი სახელი:</label>
                <input id="firstname" type="text" name="firstname" value="გიორგი" disabled="disabled" />
            </p>
            <p>
                <label for="surname">თქვენი გვარი:</label>
                <input id="surname" type="text" name="surname" placeholder="შეიყვანეთ გვარი" />
            </p>
            <p>
                <label for="password">თქვენი პაროლი:</label>
                <input id="password" type="password" name="password" />
            </p>
            <p>
                <label for="email">თქვენი ფოსტა:</label>
                <input id="email" type="email" name="email" />
            </p>
            <p>
                <label for="phone">თქვენი ტელეფონი:</label>
                <input id="phone" type="tel" name="phone" />
            </p>
            <p>
                <label for="site">თქვენი საიტი:</label>
                <input id="site" type="url" name="site" />
            </p>
        </fieldset>
        <fieldset>
            <p>
                <label>თქვენი საყვარელი ფერი:</label>
                <input type="radio" name="color" value="1" />მწვანე
                <input type="radio" name="color" value="2" checked="checked" />წითელი
                <input type="radio" name="color" value="3" />ყვითელი
            </p>
            <p>
                <label>რას მიირთმევთ:</label>
                <input type="checkbox" name="order" value="1" />სუპს
                <input type="checkbox" name="order" value="2" />ქაბაბს
                <input type="checkbox" name="order" value="3" />თევზს
            </p>
            <p>
                <label for="news">გამოიწერეთ სიახლეები:</label>
                <input id="news" type="checkbox" name="news" value="1" checked="checked" />
            </p>
            <p>
                <label for="search">რომელ საძიებო სისტემას იყენებთ:</label>
                <input id="search" type="text" name="search" list="search_list" />
                <datalist id="search_list">
                    <option value="Google"></option>
                    <option value="yahoo"></option>
                </datalist>
            </p>
            <p>
                <label for="file">ფაილის ატვირთვა:</label>
                <input id="file" type="file" name="file" />
            </p>
            <p>
                <label for="count">ასლების რაოდენობა:</label>
                <input id="count" type="number" name="count" min="1" max="10" />
            </p>
            <p>
                <label for="range">დიაპაზონი:</label>
                <input id="range" type="range" name="range" min="1" max="100" step="2" />
            </p>
            <p>
                <label for="date">თარიღი:</label>
                <input id="date" type="date" name="date" />
            </p>
            <p>
                <label for="color">ფერი:</label>
                <input id="color" type="color" name="color" />
            </p>
            <p>
                <label for="message">შეტყობინება:</label>
                <textarea id="message" name="message">ჩემი შეტყობინება</textarea>
            </p>
            <p>
                <label for="city">ქალაქი:</label>
                <select id="city" name="city" size="3">
                    <optgroup label="მსხვილი ქალაქები">
                        <option value="1">თბილისი</option>
                        <option value="2">ქუთაისი</option>
                    </optgroup>
                    <optgroup label="რაიონული ცენტრები">
                        <option value="3" selected="selected">ლანჩხუთი</option>
                        <option value="4">თელავი</option>
                        <option value="5">ზუგდიდი</option>
                    </optgroup>
                </select>
            </p>
        </fieldset>
        <p>
            <input type="hidden" name="article_id" value="100" />
            <input type="reset" value="გასუფთავება" />
            <input type="submit" name="submit" value="გაგზავნა" />
        </p>
    </form>