ПРОБЛЕМА С FORM КОТОРОЙ НЕТ ПРИ DIV
Всем привет ! Вопрос следующий (прошу не судить строго так как только только начал изучать JS). Пишу форму и когда меняю форму на див данный код работает а при форме нет =( обьясните почему
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form 2</title> <link rel="stylesheet" type="text/css" href="css/form.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome.css"> </head> <body> <form class="form-wrap"> <div class="input-wrap"> <input type="text" name="text" placeholder="Name"> <input type="email" name="email" placeholder="Email"> </div> <div class="textarea-wrap"> <textarea name="textarea" placeholder="Message"></textarea> </div> <label class="backg"> <div class="air-wrap"> <input type="submit" class="submit" id="input" onclick="clickMe()"> <i class="fa fa-paper-plane-o" aria-hidden="true" id="icon"></i> </div> </label> </form> <script type="text/javascript"> function clickMe () { // body... var icon = document.getElementById('icon'); icon.classList.add('icon'); function removeClass () { icon.classList.remove('icon'); }; setTimeout(removeClass, 2000); }; </script> </body> </html> * { padding: 0; margin: 0; } body { padding: 0; margin: 0; } form { } .form-wrap { width: 650px; height: 350px; box-sizing: border-box; left: 50%; margin-top: 200px; margin-left: -325px; position: relative; box-shadow: -22px 11px 43px -11px rgba(0,0,0,0.75); } .backg { position: absolute; width: 70px; height: 100%; top: 0; right: 0; overflow: hidden; cursor: pointer; } .backg input { opacity: 0; visibility: 0; } .backg:after { top: 0; position: absolute; content: ""; width: 100%; height: 100%; background: pink; opacity: 0; transition: opacity 1s; } .backg:hover:after { opacity: 1; } .input-wrap { width: 89%; display: flex; justify-content: space-around; padding-top: 60px; } .input-wrap input { outline: none; display: flex; width: 207px; height: 41px; font-size: 16px; border: 0; border-bottom: 1px solid #999; } .textarea-wrap { width: 89%; display: flex; justify-content: space-around; padding-top: 60px; } .textarea-wrap textarea { outline: none; display: flex; width: 73%; height: 133px; font-size: 16px; border: 0; border-bottom: 1px solid #999; list-style-type: none; resize: none; } .air-wrap { position: relative; width: 100%; height: 100%; } .backg i { color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 10; font-size: 40px; transition: all 1s; } .input-wrap input[placeholder="Name"]:hover, .input-wrap input[placeholder="Email"]:hover { } .icon { margin-top: -100px; opacity: 0; margin-left: 100px; } /* SUBMIT BACKGROUND */ .backg:after { background: rgba(210,155,242,1); background: -moz-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 41%, rgba(245,220,245,1) 83%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(210,155,242,1)), color-stop(41%, rgba(210,155,242,1)), color-stop(83%, rgba(245,220,245,1)), color-stop(99%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1))); background: -webkit-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 41%, rgba(245,220,245,1) 83%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%); background: -o-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 41%, rgba(245,220,245,1) 83%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%); background: -ms-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 41%, rgba(245,220,245,1) 83%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%); background: linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 41%, rgba(245,220,245,1) 83%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d29bf2', endColorstr='#ffffff', GradientType=1 ); } .backg { background: rgba(210,155,242,1); background: -moz-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 25%, rgba(245,220,245,1) 62%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(210,155,242,1)), color-stop(25%, rgba(210,155,242,1)), color-stop(62%, rgba(245,220,245,1)), color-stop(85%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1))); background: -webkit-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 25%, rgba(245,220,245,1) 62%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%); background: -o-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 25%, rgba(245,220,245,1) 62%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%); background: -ms-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 25%, rgba(245,220,245,1) 62%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%); background: linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 25%, rgba(245,220,245,1) 62%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d29bf2', endColorstr='#ffffff', GradientType=1 ); } |
Цитата:
var icon document.getElementById('icon'); var input document.getElementById('input'); |
daramylove,
Цитата:
Действия браузера по умолчанию Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
отформатировал
|
daramylove,
форма отправляется на сервер, нужна отмена отправки!!! читайте про ajax <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form 2</title> <style type="text/css"> * { padding: 0; margin: 0; } body { padding: 0; margin: 0; } form { } .form-wrap { width: 650px; height: 350px; box-sizing: border-box; left: 50%; margin-top: 200px; margin-left: -325px; position: relative; box-shadow: -22px 11px 43px -11px rgba(0,0,0,0.75); } .backg { position: absolute; width: 70px; height: 100%; top: 0; right: 0; overflow: hidden; cursor: pointer; } .backg input { opacity: 0; visibility: 0; } .backg:after { top: 0; position: absolute; content: ""; width: 100%; height: 100%; background: pink; opacity: 0; transition: opacity 1s; } .backg:hover:after { opacity: 1; } .input-wrap { width: 89%; display: flex; justify-content: space-around; padding-top: 60px; } .input-wrap input { outline: none; display: flex; width: 207px; height: 41px; font-size: 16px; border: 0; border-bottom: 1px solid #999; } .textarea-wrap { width: 89%; display: flex; justify-content: space-around; padding-top: 60px; } .textarea-wrap textarea { outline: none; display: flex; width: 73%; height: 133px; font-size: 16px; border: 0; border-bottom: 1px solid #999; list-style-type: none; resize: none; } .air-wrap { position: relative; width: 100%; height: 100%; } .backg i { color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 10; font-size: 40px; transition: all 1s; } .input-wrap input[placeholder="Name"]:hover, .input-wrap input[placeholder="Email"]:hover { } .icon { margin-top: -100px; opacity: 0; margin-left: 100px; } /* SUBMIT BACKGROUND */ .backg:after { background: rgba(210,155,242,1); background: -moz-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 41%, rgba(245,220,245,1) 83%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(210,155,242,1)), color-stop(41%, rgba(210,155,242,1)), color-stop(83%, rgba(245,220,245,1)), color-stop(99%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1))); background: -webkit-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 41%, rgba(245,220,245,1) 83%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%); background: -o-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 41%, rgba(245,220,245,1) 83%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%); background: -ms-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 41%, rgba(245,220,245,1) 83%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%); background: linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 41%, rgba(245,220,245,1) 83%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d29bf2', endColorstr='#ffffff', GradientType=1 ); } .backg { background: rgba(210,155,242,1); background: -moz-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 25%, rgba(245,220,245,1) 62%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(210,155,242,1)), color-stop(25%, rgba(210,155,242,1)), color-stop(62%, rgba(245,220,245,1)), color-stop(85%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1))); background: -webkit-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 25%, rgba(245,220,245,1) 62%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%); background: -o-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 25%, rgba(245,220,245,1) 62%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%); background: -ms-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 25%, rgba(245,220,245,1) 62%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%); background: linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 25%, rgba(245,220,245,1) 62%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d29bf2', endColorstr='#ffffff', GradientType=1 ); } </style> </head> <body> <form class="form-wrap"> <div class="input-wrap"> <input type="text" name="text" placeholder="Name"> <input type="email" name="email" placeholder="Email"> </div> <div class="textarea-wrap"> <textarea name="textarea" placeholder="Message"></textarea> </div> <label class="backg"> <div class="air-wrap"> <input type="submit" class="submit" id="input" onclick="return clickMe()"> <i class="fa fa-paper-plane-o" aria-hidden="true" id="icon">✉</i> </div> </label> </form> <script type="text/javascript"> function clickMe () { // body... var icon = document.getElementById('icon'); icon.classList.add('icon'); function removeClass () { icon.classList.remove('icon'); }; setTimeout(removeClass, 2000); return false }; </script> </body> </html> |
Часовой пояс GMT +3, время: 11:21. |