簡易表單書寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .bbb{
   width: 30%;
  font-size: 20px;
  color: #fff;
  line-height: 50px;
  background: deepskyblue;
  border: 1px solid deepskyblue;
  border-radius: 100px;
        /*margin-left:  500px;*/
        /*規定顯示光標類型*/
  cursor: pointer;
  /*cursor: wait;   !* 轉圈 *!*/
        float: right;   /* 盒子浮動 */
    }
    .wbkdx{
         width: 30%;
  height: 50px;
  border-radius: 10px;
  border: 2px solid red;
  box-sizing: border-box;
  padding-left: 0.5em;     /* 距離左邊框尺寸 */
  font-size: 18px;
    }

</style>

<body>

<form action="" method="get" enctype="multipart/form-data">
    <p>用戶名: <input type="text" name="usr" placeholder="請輸入用戶名" class="wbkdx"></p>
    <p>密&emsp;碼: <input type="password" name="passwd"></p>
    <p>性&emsp;別:
        <input type="radio" name="sex" value="man">男
        <input type="radio" name="sex" value="woman">女
        <input type="radio" name="sex" value="secret" checked>保密
    </p>
    <p>
        愛&emsp;好:
        <input type="checkbox" name="hobby" value="sing">唱歌
        <input type="checkbox" name="hobby" value="dance">跳舞
        <input type="checkbox" name="hobby" value="draw">畫畫
    </p>
    
    <p>上傳文件: <input type="file"></p>

    <!--下拉框-->
    <p>
        地&emsp;址:
        <select name="addr" id="">
            <optgroup label="湖南省">
                <option value="cs">長沙</option>
                <option value="hy">衡陽</option>
            </optgroup>

            <optgroup label="湖北省">
                <option value="wh" selected>武漢</option>
                <option value="hs">黃石</option>
        </optgroup></select>
    </p>


    <!--文本域-->
    <fieldset>
<legend> 個人簡介:</legend>
    <textarea name="profile"  cols="50" rows="8"></textarea>

</fieldset>


    <div>
        <input type="submit" value="提交" class="bbb">
    </div>
        <input type="reset" value="重置">

</form>






</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章