所谓表单,就是你看到的各种由用户填写的框框。这就是表单了。
表单的标签是form
,务必注意下这个单词,经常新手同学们会不小心写成from
,这肯定是不对的了。
<form>
</form>
有了form标签
后,其他的标签,就都要写在它里面了。
文本框与密码框
先来学习两个最常见的表单。
<form>
用户名(文本框):<input type="text">
<br>
密码(密码框):<input type="password">
<br>
</form>
它们两个都是input
开始,区别是type
,也就是类型不同。那实际访问一下,我们填写点内容,第一个文本框填写的内容,会直接显示给用户看。而密码框,输入的内容是不能让用户看见的,所以显示的都是小圆点了。
单选
<form>
<!-- ... -->
性别(单选按钮):
<input type="radio"> 男
<input type="radio"> 女
<br />
</form>
单选依然是input标签
,不同的是 type 变成了radio
,但是这里radio
可不是收音机
的意思咯,它就是单选。好我们来点击一下试试,发现并没有实现单选的效果。原因是这里少了一个属性,我们分别给它们加上一个name="sex"
,注意这里的name
,也就是它们的名字,必须是相同的。这样浏览器就认为它们两是一组标签了。刷新后,再来点击试试,果然这就实现了单选。
<form>
<!-- ... -->
性别(单选按钮):
<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女
<br />
</form>
复选框
复选框的意思,当然就是可以选择多记录了,它的显示和刚才的单选有点点不一样。这里是小方框,而单选是圆形的框。
<form>
<!-- ... -->
爱好(复选框):
<input type="checkbox" >音乐
<input type="checkbox">艺术
<input type="checkbox">电脑
<br>
</form>
下拉列表
这个下拉列表,就和刚才我们所有学习的表单有些不同了。它不是input标签
哦,而是select标签
。
其中每一个选项,都要用option标签
包起来。
<form>
<!-- ... -->
国籍(下拉列表):
<select>
<option>中国</option>
<option>美国</option>
<option>澳大利亚</option>
<option>加拿大</option>
</select>
<br />
</form>
文本域
有些时候,需要填写比较多的内容,这时候再用刚才学的文本框
就无法实现了。那么就需要这个textarea标签了
。
<form>
<!-- ... -->
个性签名(文本域):
<textarea rows="10" cols="30" ></textarea>
<br />
</form>
提交、重置按钮
最后要学习的是两个按钮,一个是提交按钮,type 是submit
,另一个重置按钮的 type 是reset
。
当点击提交按钮
后,所有表单中的内容,就会提交给后端程序了。我们现在还没学到那一步,所以先不要点击提交了,现在就算点了也看不到啥效果的。
重置按钮的作用很简单,当你填写内容后,点击它,所有表单的内容,都恢复原状了。
<form>
<!-- ... -->
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
</form>
HTML 所有常用的标签也就是这么多了,是不是真的不难啊?基本你只要多写个几遍,都能很容易掌握了。我们下一节,学习下正确的HTML书写格式
的问题。