2013-05-24 2 views
-3

HTML과 CSS로 첫 번째 웹 양식을 만들었지 만 기능적으로 만드는 방법을 모르겠습니다. HTML과 CSS로 처리 할 수 ​​있습니까? 아니면 JQuery 또는 JavaScript를 사용해야합니까?이 웹 양식을 기능적으로 만드는 방법은 무엇입니까?

전체 모양을 하나의 단추처럼 보이게 할 수 있습니까? 그런 다음 사용자가 버튼을 클릭하면 웹 양식이 멋지게 굴립니다. http://jsfiddle.net/ckvgq/4/

<body> 
    <div id="inputs"> 
    <form> 
     First & last name:<input class='textbox' type='text' name='Aloha' value='Aloha'><br/> 
     E-mail:<input class='textbox' type='text' name='Yello!' value='Yello!'><br/> 
     <input type='checkbox' checked>Check if you'd like to follow this page?<br/> 
     </form> 
    </div> 
    <p>Type your message here:</p><br/> 
     <textarea></textarea><br/> 
     <input type='submit'> 
    </body> 


form { 
    font-family: Verdana, Arial, sans-serif; 
} 
p { 
    font-family: Verdana, Arial, sans-serif; 
    display: inline-block; 
} 
input { 
    font-family: Verdana, Arial, sans-serif; 
    color: #123456; 
} 
textarea { 
    vertical-align: top; 
    width: 400px; 
    color: yellow; 
    background-color: navy; 
} 
#inputs { 
    width: 400px; 
    clear: both; 
} 
.textbox{ 
    background-color: navy; 
    color: yellow; 
} 
+9

자습서를 읽거나 양식에 대한 책을 구입해야합니다. 이것은 101 레벨 물건입니다. – j08691

+0

그럼 '기능적'이란 무엇을 의미합니까? 그게 정확히 도움이되지 않습니다. – user2406160

+0

웹 디자인에 익숙하지 않아서 제가 할 수있는 모든 자원을 사용하려고합니다. 당신이 도움을 기꺼이하지 않는 경우에 여기에서 뉴비의 포스트에주의를 기울이지 말라. Afterall은 사람들이 도움을 구하는 장소입니다. 코딩 경험이 있거나 코딩에 익숙한 사람이든 상관 없습니다. –

답변

1

하는 모든 형태의 데이터가 form -tags 사이에 있는지 확인 : 여기

지금까지 내 작품의 링크입니다. 또한 form에 적절한 속성을 넣어야 올바른 페이지로 보낼 수 있습니다. 제출 단추를 양식 외부에 놓습니다. 노팅은 클릭 할 때 발생합니다.

작은 예 :

<body> 
    <form action="/somewhere.php" method="post"> 
     <div>Name: <input type="text" name="name" placeholder="Name" /></div> 
     <div>Email: <input type="text" name="email" placeholder="Email" /></div> 
     <div><input type="submit" value="Send data" /></div> 
    </form> 
</body> 

CSS의 양식의 기능과는 아무 상관이 없습니다.

정말 기본 HTML이기 때문에이 tutorial을 살펴 보시기 바랍니다.

+0

감사합니다. 제안한 자습서를 읽습니다. –

관련 문제