一款清新的CSS注册表单,表单分为基本信息和扩展信息两个部分,由输入框、文本区域、下拉列表等组成,所以元素的样式均可自由调整。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791