Stylizowanie formularza przez JS.

pytanie zadane 18 października 2018 w HTML i CSS przez LinosiK Obywatel (1,920 p.)
zmienione kategorie 18 października 2018 przez criss

Cześć wszystkim !

Mam pewien problem, próbowałem go szukać w internecie, jednak nie mogę nic znaleźć.. być może źle szukam bo nie wiem do końca jak to nazwać. Dlatego zgłaszam się tutaj z prośbą o pomoc. Mianowicie:

Mam takiego sobie diva:

<div id="formularz">
			<h1>FORMULARZ KONTAKTOWY</h1><br>
			<div id="dane">
				<p id="dane2">Imie nazwisko<br>
				kontakt@imienazwisko.pl</p>
			</div>
			<input type="button" value="Przejdź" onclick="zmien()" id="zmien">

Po kliknięciu w przycisk chciałbym aby w divie o id=formularz pojawił się formularz kontaktowy zamiast napisów. w Javascripcie na szybko napisałem skrypt i działa podmienia zawartość, jednakże chciałbym to wystylizować i moje pytanie brzmi jak to zrobić ?

Oraz jak zrobić płynniejsze przechodzenie pomiędzy tą zmianą ? Np przesunięcie wszystkiego w lewo ( "stary" div wyjeżdża w lewo, a formularz wjeżdża od prawej do lewej i zatrzymuje się na środku ).

Skrypt JS:

function zmien(){
    formularz='<form> Imię: <input type="text" name="imie"/><br>Nazwisko:<input type="text" name="nazwisko"/><br>E-mail:<input type="text" name="email"/><br>Treść:<textarea></textarea><br><input type="submit" value="wyślij"/></form>'
    document.getElementById("formularz").innerHTML=formularz;
}

Aha no i pytanie jeszcze mam czy mogę jakoś inaczej zapisać kod HTML w mojej zmiennej, jak narazie wszystko mam w jednej linii i przez to mój kod jest mało przejrzysty :(. Z góry dziękuję za pomoc !

1 odpowiedź

odpowiedź 18 października 2018 przez AdamSiekierski Dyskutant (8,340 p.)

No powinno się używać struktury DOM. Tu masz taki dość obszerny artykuł.

Pzdr

komentarz 18 października 2018 przez kenjiro244 Dyskutant (8,600 p.)

Więc raczej tutaj warto o tym przeczytać Tutaj a nie na w3schools chociażby dlatego

komentarz 21 października 2018 przez AdamSiekierski Dyskutant (8,340 p.)

Przejrzałem podesłane przez Ciebie linki przejrzałem i zgadzam się - W3Schools jest słabe i nie powinno sie z tamtąd uczyć. Natomiast na przejrzenie jakiejś nowej funkcji w JS jest całkiem ok. Nigdy nie kopiuję kodów z W3S bo są też słabe. Artykułów z kursjs nigdy zbytnio nie trawiłem, ja zawsze lubię taką "Wiedzę w pigułce", lubię korzystać z dokumentacji języków, chociaż nie mówię że kursjs jest słaby.

Pzdr