Loading...
+ Нов въпрос
a.angelov avatar a.angelov 1316 Точки

[Homework] Web Fundamentals (HTML + CSS) - HTML Forms - септ.2014

Виждам, че все още няма тема за това домашно...

Ето моите решения до момента:

Кодът: 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;

 

На първа задача ако някой може да ми каже, защо бордърите и полетата ми са с различен цвят горе/ляво и долу/дясно... - коригирано.

 

ПС. Това е окончателния вариант на решенията.

6
Web Fundamentals - HTML5 15/10/2014 10:58:31
Velichkov avatar Velichkov 87 Точки

По подразбиране на input полетата border-style им е inset - заради това границите са с различен цвят. Сложи го на solid и ще се оправи :)

1
14/10/2014 13:27:30
a.angelov avatar a.angelov 1316 Точки

Благодаря!

Оправих го - точно това е била причината smile

1
Filkolev avatar Filkolev 4482 Точки

Ето и моите решения към момента, едва ли си финални.

Код: GitHub

 

01.Simple Form DEMO - не излиза добре в превюто, но в браузъра е ОК.

02.Flight OrderDEMO

03.WordPress ThemeDEMO

04.Fakebook Register FormDEMO

05.Laptop ChoiceDEMO

Въпрос по 4-та задача. Виждам на картинката, че textarea полето може да се преоразмерява. Само че за да се държи прилично формата като цяло трябваше да сложа само вертикално преоразмеряване и да набутам елементите в таблица, иначе се получават много гадни бъгове при преоразмеряване. Идеи как да подходя?

4
14/10/2014 14:38:37
a.angelov avatar a.angelov 1316 Точки

Като ти гледам решенията виждам, че трябва да си оправя моето на 2 задача за Firefox, че се чупи малко :)

Хм..., аз на 4-та задача затова ограничих текстареата изобщо да не се преоразмерява /въпреки че на картинката ъгълчето за размера го има/...

0
nikola.m.nikolov avatar nikola.m.nikolov 830 Точки

1. Simple Form - CODE , DEMO

2. Flight Order - CODE , DEMO

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

3
18/10/2014 23:50:24
a.polyanska avatar a.polyanska 107 Точки

Аз имам едно техническо питане по първа задача(а и за навсякъде, където трябва да се  въвеждат пароли). Когато дам типът да е "password" и после съответното value в поленцето ми излиза стойността, но замаскирана с черни точки, а не както е заложено в примера- самия текст- "password", "submit password" и т.н. Как се справяме с това?

0
Filkolev avatar Filkolev 4482 Точки

Текстът, който се вижда на картинките в повечето случаи са placeholder-и, които са удобни за потребителя да знае какво да въведе. Сигурно често си попадала на такива - в момента в който кликнеш на полето, този плейсхолдър изчезва и се заменя от стойността, която потребителят въвежда.

0
a.polyanska avatar a.polyanska 107 Точки

Това ясно- имам предвид, че този удобен текст не ми излиза, а още преди въвеждане от потребителя думичката Passowrd, която съм дала като value ми излиза с черни точки. Ето как (не е завършена задачата, поствам само, за да видите какво имам предвид): ето

0
Filkolev avatar Filkolev 4482 Точки

Именно. Ти задаваш value, а по подразбиране value в поле тип password е скрито на екрана.

На теб ти трябва да сложиш placeholder="Password" и така текстът ще се покаже. Плейсхолдъра е просто ориентиращ текст, който стои там докато потребителят не въведе нещо. Ако формата се събмитне без да е въведено там нищо, този текст не се предава като стойност на полето.

Докато value-то (value="Password") пълни полето със стойност, която потребителят може да промени, но ако не я промени, тя ще се събмитне така, както е сложена по подразбиране. Надявам се разбра разграничението (надявам се и аз да съм те разбрал правилно).

Разгледай примерно в W3Schools двата атрибута value и placeholder, там може да е обяснено по-добре.

1
velio84 avatar velio84 241 Точки

На мен ми остава последната, ето какво съм надробил дотук:

Github

01 Demo (показва се правилно само на Хром и Опера)

02 Demo

03 Demo

04 Demo

05 Demo

Пак много нагаждане падна, но вече съм се примирил. Учудващо и за мен самия, с изключение на първата, останалите успях да ги докарам да изглеждат еднакво и на Файърфокс, и на Хром cool

На 4 - фейкбук даже си сложих и шрифт като на фейсбук, но демото не го хваща. На рождения ден съм сложил type="datetime", но нещо не ще да бачка в никой браузър.  Видях, че сте ползвали datetime-locale и така се оправи smile

1
16/10/2014 04:14:09
nikola.m.nikolov avatar nikola.m.nikolov 830 Точки

Малко преработих първатата ти задача, така че да излиза правилно и на Firefox и IE:

HTML , CSS

В html-a съм махнал всички <br />, понеже не е добра практика да се използват. Вместо тях трябва да се използват пропъртитата за позициониране в CSS. Втората промяна в html-а е променения <span> на <div> за Forgot Password.

В css-а са доста повече промените, но съм сложил коментари какво съм махал, променял и добавял. Естествено може и да съм пропуснал да сложа някой коментар.

 

2
15/10/2014 16:31:12
velio84 avatar velio84 241 Точки

Никола, благодя много за отделеното време за корекциите. Изключително полезни ми бяха smile

1
magdalena70 avatar magdalena70 96 Точки

Homework HTML forms -

1.Simple Form - DEMO  HTML  CSS

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 - и тук не отваря снимки...

 

Очаквам забележки и съвети.Раотата с форми не ми е много ясна и определено ме затруднява. :)

0
18/10/2014 15:44:34
a.angelov avatar a.angelov 1316 Точки

На мен ми изглежда добре.

Като препоръка за CSS-а - за селектор е достатъчно да ползваш id на съответния div без id на wrapper-a. Тоест ти го пишеш:

#wrapper #right, а е достатъчно само: #right.

0
VenelinGrozev avatar VenelinGrozev 130 Точки

Мисля, че позиционирането на <label for="remember_me">Remember me</label> и <a href="#">Forgot Password</a> може да стане без position: absolute а само с float: left и подходящо подреждане в html файла.

Нарочно ли си ги оставила в ляво на десният wrapper?

0
magdalena70 avatar magdalena70 96 Точки

 VenelinGrozev ,какво имаш в предвид ,че съм ги оставила в ляво на десния wrapper? Не разбирам.

0
xXxtraCookie avatar xXxtraCookie 6 Точки

Браво, много добре и пспретнато написан код!

Разгледах кодовете и забелязах моите пропуски, малки, но достатъчно дразнещи, че да ми прецакат нещо :)

0
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.