Виждам, че все още няма тема за това домашно...
Ето моите решения до момента:
Кодът: HTML Forms - Homework
Preview:
01. Simple Form - DEMO;
02. Flight Order - DEMO;
03. WordPress Theme - DEMO;
04. FakeBook Register Form - DEMO;
05. Laptop Choice - DEMO;
На първа задача ако някой може да ми каже, защо бордърите и полетата ми са с различен цвят горе/ляво и долу/дясно... - коригирано.
ПС. Това е окончателния вариант на решенията.
По подразбиране на input полетата border-style им е inset - заради това границите са с различен цвят. Сложи го на solid и ще се оправи :)
Ето и моите решения към момента, едва ли си финални.
Код: GitHub
01.Simple Form DEMO - не излиза добре в превюто, но в браузъра е ОК.
02.Flight Order - DEMO
03.WordPress Theme - DEMO
04.Fakebook Register Form - DEMO
05.Laptop Choice - DEMO
Въпрос по 4-та задача. Виждам на картинката, че textarea полето може да се преоразмерява. Само че за да се държи прилично формата като цяло трябваше да сложа само вертикално преоразмеряване и да набутам елементите в таблица, иначе се получават много гадни бъгове при преоразмеряване. Идеи как да подходя?
Като ти гледам решенията виждам, че трябва да си оправя моето на 2 задача за Firefox, че се чупи малко :)
Хм..., аз на 4-та задача затова ограничих текстареата изобщо да не се преоразмерява /въпреки че на картинката ъгълчето за размера го има/...
3. WordPress Theme - CODE , DEMO-GitHub , DEMO2 - за логото и search бутона използвах svg(векторни) картинки. Ако не ви зареди логото и бутона в Github демото отворете второто Demo. Направих и saerch формата да търси директно в сайта на wordpress.org чрез малко javascript код.
4. Fakebook Register Form - CODE , DEMO
5. Laptop Choice - CODE , DEMO-GitHub , DEMO2
Аз имам едно техническо питане по първа задача(а и за навсякъде, където трябва да се въвеждат пароли). Когато дам типът да е "password" и после съответното value в поленцето ми излиза стойността, но замаскирана с черни точки, а не както е заложено в примера- самия текст- "password", "submit password" и т.н. Как се справяме с това?
Текстът, който се вижда на картинките в повечето случаи са placeholder-и, които са удобни за потребителя да знае какво да въведе. Сигурно често си попадала на такива - в момента в който кликнеш на полето, този плейсхолдър изчезва и се заменя от стойността, която потребителят въвежда.
Това ясно- имам предвид, че този удобен текст не ми излиза, а още преди въвеждане от потребителя думичката Passowrd, която съм дала като value ми излиза с черни точки. Ето как (не е завършена задачата, поствам само, за да видите какво имам предвид): ето
Именно. Ти задаваш value, а по подразбиране value в поле тип password е скрито на екрана.
На теб ти трябва да сложиш placeholder="Password" и така текстът ще се покаже. Плейсхолдъра е просто ориентиращ текст, който стои там докато потребителят не въведе нещо. Ако формата се събмитне без да е въведено там нищо, този текст не се предава като стойност на полето.
Докато value-то (value="Password") пълни полето със стойност, която потребителят може да промени, но ако не я промени, тя ще се събмитне така, както е сложена по подразбиране. Надявам се разбра разграничението (надявам се и аз да съм те разбрал правилно).
Разгледай примерно в W3Schools двата атрибута value и placeholder, там може да е обяснено по-добре.
На мен ми остава последната, ето какво съм надробил дотук:
01 Demo (показва се правилно само на Хром и Опера)
Пак много нагаждане падна, но вече съм се примирил. Учудващо и за мен самия, с изключение на първата, останалите успях да ги докарам да изглеждат еднакво и на Файърфокс, и на Хром 
На 4 - фейкбук даже си сложих и шрифт като на фейсбук, но демото не го хваща. На рождения ден съм сложил type="datetime", но нещо не ще да бачка в никой браузър. Видях, че сте ползвали datetime-locale и така се оправи 
Малко преработих първатата ти задача, така че да излиза правилно и на Firefox и IE:
В html-a съм махнал всички <br />, понеже не е добра практика да се използват. Вместо тях трябва да се използват пропъртитата за позициониране в CSS. Втората промяна в html-а е променения <span> на <div> за Forgot Password.
В css-а са доста повече промените, но съм сложил коментари какво съм махал, променял и добавял. Естествено може и да съм пропуснал да сложа някой коментар.
Никола, благодя много за отделеното време за корекциите. Изключително полезни ми бяха
Homework HTML forms -
2.Flight Order - DEMO HTML CSS
3.WordPress Theme - DEMO HTML CSS - тук ,естествено, има проблем със снимките - не ги отваря :(
4.Fakebook Register Form - DEMO HTML CSS
5.Laptop Choice - DEMO HTML CSS - и тук не отваря снимки...
Очаквам забележки и съвети.Раотата с форми не ми е много ясна и определено ме затруднява. :)
На мен ми изглежда добре.
Като препоръка за CSS-а - за селектор е достатъчно да ползваш id на съответния div без id на wrapper-a. Тоест ти го пишеш:
#wrapper #right, а е достатъчно само: #right.
Мисля, че позиционирането на <label for="remember_me">Remember me</label> и <a href="#">Forgot Password</a> може да стане без position: absolute а само с float: left и подходящо подреждане в html файла.
Нарочно ли си ги оставила в ляво на десният wrapper?
VenelinGrozev ,какво имаш в предвид ,че съм ги оставила в ляво на десния wrapper? Не разбирам.
Браво, много добре и пспретнато написан код!
Разгледах кодовете и забелязах моите пропуски, малки, но достатъчно дразнещи, че да ми прецакат нещо :)
Благодаря!
Оправих го - точно това е била причината