web前端html的复习（四）表单

目录

1. 表单域
2. 表单控件及用法

说起表单，我相信大家之前一定接触过的。比如你注册了一个csdn的账号，其实就是通过表单提交注册的。下面让我们来了解一下吧。

1. 表单域
   所谓表单域其实就是我们写表单标签的区域了。

<form action="" method="get">

</form>

       通俗一点的说，这就可以叫做表单域，在这里只用到了action属性和method属性，不过在这个阶段就够用了。

2. 表单控件及用法
   （一）常用控件 input控件
   
   上图就是input在现阶段常用的属性了。我们挑选几个不怎么容易理解的说一下。

（二）单选按钮和复选按钮
       一.若单选按钮的数量达到了两个及以上，并且为了表达同一个意思，必须将这些单选按钮放入同一组控件当中。如下。

<input type="radio" name="sex">女<input type="radio" name="sex">男

       如果这样写的话，那么两个单选按钮就被放在了同一个组里面了。

       注意：1.同一组的单选按钮name值相同。2.复选框同理。

（三）图像标签

<input type="image" src=""/>

       这就是图像标签的写法了，他可以让你的按钮更加的漂亮。

（四）input标签为单标签<input type="text"/>

（五）label标签
       用于绑定一个表单标签，点击label标签的时候，被绑定的表单元素就会获得输入框的焦点。

<label for="dl">label</label><input type="text" id="dl"/>

       在上面的代码上for绑定的是input标签里面的id属性。

（六）textarea控件
       这个标签是现实多行的输入框，像我们上面的输入框都是单行的，这个可以自己调整行数和每行的字符数。

扫描二维码关注公众号，回复： 5760551 查看本文章

<textarea cols="20" rows="5">

</textarea>

上面的代码就是输入域，其中cols属性是每行中的字符数，rows属性是显示列数。

（七）下拉菜单
       随便打开一个流行的网站，在它的注册页面上总能找到下拉菜单的，比如让我们填写家庭地址的时候大多数就是下拉菜单。

这就是简单下拉菜单

省份<select>
           <option>北京</option>
           <option>山东</option>
           <option>内蒙古</option>
    </select>

       但是稍微注意一下我们会发现，我们并没有进行任何操作，它就自动选择北京了，你看看，这不是瞧不起我们广大的父老乡亲们嘛，解决这个很简单，在你想最先默认选择的option标签里添加selected即可解决。