CSS表单练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单的基本用法</title>
<style type="">
    *{padding:0;margin:0;}
        form{width:500px;margin:50px auto;}
        p{margin-top:15px;}
        textarea{vertical-align:top;}
        input[type="reset"]{margin-left:10px;}
</style>
</head>

<body>
<h4>表单1</h4>
<form action="result.html" method="get">
    <p>姓名<input name="name" type="text" value=""></input></p>
    <p>密码<input name="password" type="password" value=""></input></p>
    <p>
        <input type="submit" name="Button" value="提交"></input>
        <input type="reset" name="Reset" value="重填"></input>
    </p>    
</form>
    <br/>
<h4>表单2</h4>
<form action="" method="post">
    <p>用户名:<input type="hidden" name="username" value="这是一个隐藏的文本框" size=25></input></p>
        <p>文本框:<input type="text" name="text" value="这是一个文本框" size=25 maxlength="8"/></p>
        <p>密码框:<input type="password" name="password"  size="25"/></p>
        <p>性别(单选按钮):<input type="radio" name="sex" checked="checked"/> 男 
                      <input type="radio" name="sex"/> 女</p>
        
        <p>爱好(多选按钮):<input type="checkbox" name="like" checked="checked"/> 吃 
        <input type="checkbox" name="like"/> 玩
        <input type="checkbox" name="like"/>睡觉
        <input type="checkbox" name="like"/>赛车</p>
        
        <p>城市(下拉列表):
        <select name="city">
          <option value="北京">北京</option>
          <option value="上海" selected="selected">上海</option>
          <option value="南京">南京</option>
          <option value="河北">河北</option>
         </select>
         </p>
      
        <p>简历上传(文件域):<input type="file" name="file"/></p>
        
        <p>个人简介(多行文本框):<textarea cols="30" rows="10" name="area">个人喜欢玩电脑,性格开朗,活泼好动~~~~~~</textarea></p>
        <p><input type="submit" value="提交"/>&nbsp;<input type="reset" value="重置"/>&nbsp;<input type="button" value="普通按钮"/>&nbsp;<input type="image"  src="img/login.gif"/></p>
</form>
</body>
</html>

 

  

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值