Skip to content

Instantly share code, notes, and snippets.

@sjyun
Created May 7, 2014 08:38
Show Gist options
  • Select an option

  • Save sjyun/45142420083dc8514013 to your computer and use it in GitHub Desktop.

Select an option

Save sjyun/45142420083dc8514013 to your computer and use it in GitHub Desktop.
간단한 html form
<!doctype html>
<html lang="ko">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
form {
background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE));
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
margin:auto;
position:relative;
width:550px;
height:450px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
color: #09C;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
border: 1px solid #999;
border: inset 1px solid #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
input {
width:375px;
display:block;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
#btn {
width:100px;
position:absolute;
right:20px;
bottom:20px;
background:#09C;
color:#fff;
font-family: Tahoma, Geneva, sans-serif;
height:30px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 40px;
border: 1p solid #999;
}
#btn :hover {
background:#fff;
color:#09C;
}
input:focus {
border: 1px solid #09C;
}
</style>
</head>
<body>
<form>
<div>
<h1>Contact Form :</h1>
<label>
<span> 이름 </span><input id="name" type="text" name="name" />
</label>
<label>
<span>Email Address</span><input id="email" type="text" name="email" />
</label>
<label>
<input type="button" value="Submit Form" id="btn"/>
</label>
</div>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment