清新的CSS注册表单【原创】

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入页面的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，主要是一个form表单，通过fieldset对表单里的元素进行了分组，代码如下：

<form action="index.html" method="post">
  <h1>注册</h1>
  
  <fieldset>
    <legend><span class="number">1</span>基本信息</legend>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="user_name">
    
    <label for="mail">邮箱：</label>
    <input type="email" id="mail" name="user_email">
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="user_password">
    
    <label>年龄：</label>
    <input type="radio" id="under_13" value="under_13" name="user_age"><label for="under_13" class="light">13岁以下</label><br>
    <input type="radio" id="over_13" value="over_13" name="user_age"><label for="over_13" class="light">13岁及以上</label>
  </fieldset>
  
  <fieldset>
    <legend><span class="number">2</span>扩展信息</legend>
    <label for="bio">个人简介：</label>
    <textarea id="bio" name="user_bio"></textarea>
  </fieldset>
  <fieldset>
    <label for="job">职位：</label>
    <select id="job" name="user_job">
      <optgroup label="网站">
        <option value="frontend_developer">前端开发</option>
        <option value="php_developor">PHP开发</option>
        <option value="python_developer">Python开发</option>
        <option value="rails_developer"> Rails开发</option>
        <option value="web_designer">网站设计</option>
        <option value="WordPress_developer">WordPress开发</option>
      </optgroup>
      <optgroup label="移动端">
        <option value="Android_developer">安卓开发</option>
        <option value="iOS_developer">苹果开发</option>
        <option value="mobile_designer">移动开发</option>
      </optgroup>
      <optgroup label="商业">
        <option value="business_owner">企业主</option>
        <option value="freelancer">自由职业</option>
      </optgroup>
      <optgroup label="其他">
        <option value="secretary">助理</option>
        <option value="maintenance">运维</option>
      </optgroup>
    </select>
    
    <label>兴趣：</label>
    <input type="checkbox" id="development" value="interest_development" name="user_interest"><label class="light" for="development">开发</label><br>
    <input type="checkbox" id="design" value="interest_design" name="user_interest"><label class="light" for="design">设计</label><br>
    <input type="checkbox" id="business" value="interest_business" name="user_interest"><label class="light" for="business">营销</label>
  </fieldset>
  <button type="submit">提交</button>
</form>