Web实现：简单的注册表单。
结果图如下：
HTML部分代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>示例表单</title><link type="text/css" rel="stylesheet" href="./index.css">
</head>
<body><form action=""><input type="text" placeholder="请输入昵称" name="nick" /><textarea name="sign" rows="5" cols="30" placeholder="请输入个性签名"></textarea><input type="password" name="password" placeholder="请输入密码"><input id="male" type="radio" name="gender" value="male" /><label for="male">男</label><input type="radio" name="gender" value="female" /><label for="female">女</label><input id="coding" type="checkbox" name="interest" value="coding" /><label for="coding">编程</label><input id="other" type="checkbox" name="interest" value="other" /><label for="other">其他</label><select name="career"><option value="default">请选择职业</option> <option value="staff">公司职员</option> <option value="freelancer">自由职业者</option> <option value="student">学生</option> <option value="other">其他</option> </select><button type="submit">注册</button></form>
</body>
</html>CSS部分代码如下：
* {margin: 0;padding: 0;
}form {width: 480px;max-width: 100%;margin: 0 auto;
}input[type='text'],
textarea,
input[type='password'],
select[name='career'] {width: 100%;border: 2px solid transparent;box-sizing: border-box;border-radius: 4px;padding-left: 7px;margin: 10px 0;font-size: 16px;font-weight: 300;
}input[type='text']:focus,
textarea:focus,
input[type='password']:focus,
select[name='career']:focus {outline: none;
}input[type='text'],
select[name='career'],
input[type='password'] {height: 50px;
}select[name='career'] {padding: 30px;
}button[type='submit'] {width: 100%;height: 60px;border: 1px #262d31 solid;border-radius: 4px;background-color: #262d31;color: #fff;text-align: center;font-weight: lighter;margin: 40px 0 8px;font-size: 24px;transition: background 0.2s, border-color 0.2s;
}
button[type='submit']:focus {outline: none;
}/* 美化 */
input[name='gender'],
input[name='hobby'] {border-radius: 4px;height: 50px;margin: 20px 0;overflow: hidden;color: #333;font-weight: 300;position: relative;background-color: #f2f2f2;vertical-align: middle;
}label {color: #fff;text-shadow: 2px 0 8px #333;
}
label[for='female']::after {content: '';display: block;
}form {padding: 20px;box-sizing: border-box;position: relative;max-width: 100%;width: 520px;
}
form::before {content: '';position: absolute;z-index: -1;top: 0;bottom: 0;left: 0;right: 0;background: url(https://document.youkeda.com/P3-1-HTML-CSS/1.4/10.jpeg)no-repeat right center / 100vw;-webkit-filter: blur(2px);-moz-filter: blur(2px);-ms-filter: blur(2px);filter: blur(2px);
}单行文本输入框：
<input type="text" />
占位文本：
<input type="text" placeholder="昵称" />
输入框名字：
<input type="text" placeholder="请输入昵称" name="nick" />
输入框预输入文字：
<input type="text" placeholder="昵称" name="nick" value="小明" /><!--在输入框中预填入文字，用value属性-->
输入框不可修改：
<!--readonly作用于input和textarea元素，仅使文本框不能输入-->
<input type="text" placeholder="昵称" name="nick" value="小明" readonly />
<!--disabled作用于所有表单元素，使文本框不能输入，当表单以post或get方式提交时，使用了disabled的元素的值不会被传递出去-->
<input type="text" placeholder="昵称" name="nick" value="小明" disabled />
多行文本输入框：
<textarea name="sign" rows="5" cols="30" placeholder="请输入个性签名"></textarea>
<!--rows表示行数，cols表示文本域的可视宽度，placeholder表示占位文本，鼠标左键按住右下角的斜线拖动可以改变输入框的大小-->
密码输入框：
<input type="password" name="password" placeholder="密码">
单选按钮：
<form action=""><input type="radio" name="gender" value="male" />男<input type="radio" name="gender" value="female" />女<!--加上label标签后点击文字部分也可以选中单选按钮--><label> <input type="radio" name="gender" value="male" />男</label><label> <input type="radio" name="gender" value="female" />女</label><!--文字可选，第二种写法--><input id="male" type="radio" name="gender" value="male" /><label for="male">男</label><input id="female" type="radio" name="gender" value="female" /><label for="female">女</label>
</form>
复选框：
<form action=""><label> <input type="checkbox" name="interest" value="coding" />编程</label><label> <input type="checkbox" name="interest" value="other" />其他</label>
</form>
下拉选择列表：
<form action=""><!--单选--><select name="career"> <!--value值互不相同--><option value="default">请选择职业</option> <option value="staff">公司职员</option> <option value="freelancer">自由职业者</option> <option value="student">学生</option> <option value="other">其他</option> </select><!--多选--><select name="career" multiple> <!--加上multiple实现多选--><option value="default">请选择职业</option> <option value="staff">公司职员</option> <option value="freelancer">自由职业者</option> <option value="student">学生</option> <option value="other">其他</option> </select>
</form>
