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>
