欢迎登录

HTML好看的表单form

:2019-07-16    :447 次   :3179 字   

摘要:

好看的form的表单输入,有input[text][number].select等组件组成,pc端,未适配移动版。


代码:

image.png

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" Content="text/html; Charset=utf-8">
<title>表单</title>
<style>
</style>
</head>
<body>
<style>
#editShare{
	margin:100px auto;
	width:50%;
}
#editShare p{
	height:50px;
	line-height:50px;
	text-align:center;
}
#editShare label{
	width:80px
}
#editShare input,#editShare select{
	margin:0px 10px;
	border: 2px solid #c5464a;
    border-radius: 5px;
    background: transparent;
	text-align:center;
	height: 50px;	
	width: calc( 100% - 150px);
	text-align-last: center;
}
#editShare select{
	appearance:none;
	-moz-appearance:none; 
	-webkit-appearance:none;  
}
#Type option{
	color: black;
    background: #A6E1EC;
    line-height: 20px;
}
#editShare .button{
	width: 200px;
	background:#c5464a;
	color:#fff;	
}

</style>
<form id="editShare" name="edit" method="post" action="?act=DownloadShareSave">
    <input id="ID" name="ID" type="hidden" value="" />
    <p><label class="title">分享类型:</label>
		<select name="Type" id="Type">
            <option value="0">免费下载</option>
            <option value="1">有偿下载</option>
        </select>
	</p>
	<p><label class="title">文件标题:</label><input id="Title" class="edit" size="40" name="Title"  type="text" value="" /></p>
	<p><label class="title">文件外链:</label><input id="URL" name="URL"  size="40" value=""/></p>
    <p><label class="title">下载数量:</label><input type="number" id="DownNums" name="DownNums"  size="40" value=""/></p>
    <p><input type="submit" class="button" value="保存" id="btnPost" /></p>
</form>
</body>
</html>


    暂无评论,快来抢沙发吧!
×