HTML 表单的用法
2017-03-15 本文已影响0人
饥人谷_刘二男
1. 表单是什么？
即电子化的表格。和生活中到处需要填写的纸质表格一样，这里把它们转到了计算机页面上。
2. 表单有什么用？
根据需求获取相应的数据，通过对数据的操作完成更多的其它需求。
3. 表单怎么用？
常用的 form 表单标签及简单注释如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="login">
<form action="/getInfo" method="get"> <!-- 表单提交一般用 post 方法，也有 get 方法，视需求-->
<div class="username">
<label for="username">姓名</label> <!-- label 的 for 和 input 的 id 一致，可实现点击 label 即可输入信息-->
<input id="username" type="text" name="username" value="ruo"> <!-- text 常用于输入用户名等简短的一行信息，在页面上只有一行文本框-->
</div>
<div class="password">
<label for="password">密码</label>
<input id="password" type="password" name="password" placeholder="输入密码"> <!-- password 常用语输入密码，输入内容在页面上显示为小圆点-->
</div>
<div class="hobby">
<label>爱好</label>
<!-- checkbox 复选框，同一组需要保持 name 一致 -->
<input type="checkbox" name="hobby" value="read"> 读书
<input type="checkbox" name="hobby" value="music"> 听歌
<input type="checkbox" name="hobby" value="study"> 学习
</div>
<div class="sex">
<label>性别</label>
<!-- radio 单选框，用法同 checkbox ，同一组要保证 name 一致-->
<input type="radio" name="sex" value="男"> 男
<input type="radio" name="sex" value="女"> 女
</div>
<div class="file">
<input type="file" name="myfile" accept="image/png"> <!-- 用于上传文件，通过 accept 限制文件格式-->
</div>
<div class="select">
<select name="city"> <!-- 下拉列表选择-->
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option> <!-- selected 让当前选项变为页面默认选项 -->
<option value="hangzhou">杭州</option>
</select>
</div>
<div class="textarea">
<textarea name="article"> <!-- 多行文本域，可调整大小。用于大段内容的输入-->
多行文本，注意和 type=text的区别
</textarea>
<input type="hidden" name="csrf" value="12345623fafdffdd"> <!-- 页面不会展示，常用页面的验证，提高安全性，避免黑客攻击-->
<input type="button" value="Buttom" /> 不会提交 <!-- 按钮，点击后表单不会提交到服务器-->
<input type="submit" value="Submit" /> 会提交 <!-- 按钮，点击后表单会提交到服务器-->
<input type="reset" value="Reset" /> 重置输入 <!-- 按钮，点击后表单已填写内容会重置-->
</div>
</form>
</div>
</body>
</html>
