表单基础知识

目录

一、表单的基本结构

1、几个基本标签

2、基本代码以及运行结果

二、常用的表单控件

1、文本输入框

2、密码输入框

 3、单选框

4、复选框

5、隐藏域

6、提交按钮

7、重置按钮

8、普通按钮

9、文本域

10、下拉框

11、禁用表单控件

12、label标签

13、fieldset与legend的使用（了解即可）

---

一、表单的基本结构

1、几个基本标签

（1）form  ：表单

（2）input  ：输入框

（3）button ：按钮

2、基本代码以及运行结果

（1）代码

    <form action="https://www.baidu.com/s" target="_self" method="get" >
        <input type="text" name="wd">
        <button>百度搜索</button>
    </form>
    <br>
    <form action="https://search.jd.com/search">
        <input type="text" name="keyword">
        <button>京东搜索</button>
    </form>

（2）运行结果

二、常用的表单控件

1、文本输入框

（1）格式：<input type="text">

（2）常用属性

name  ：数据的名称

value  ：输入框的默认输入值

maxlength  ：输入框最大可输入长度

2、密码输入框

（1）格式：<input type="password">

（2）常用属性

name  ：数据的名称

value  ：输入框的默认输入值（一般不用）

maxlength  ：输入框最大可输入长度

 3、单选框

（1）格式

<input type="radio" name="gender" value="male" checked>男

<input type="radio" name="gender" value="female">女

（2）常用属性

name  ：数据的名称，若想出现单选效果，多个radio的name属性值要保持一致（必写）

value  ：提交的数据值（必写）

checked  ：默认选中的选项

4、复选框

（1）格式

<input type="checkbox" name="hobby" value="football">踢球

<input type="checkbox" name="hobby" value="sing">唱歌

<input type="checkbox" name="hobby" value="painting">画画

（2）常用属性

name  ：数据的名称（必写）

value  ：提交的数据值（必写）

checked  ：默认选中的选项

5、隐藏域

（1）格式

<input type="hidden" name="abc" value="123">

（2）含义

用户不可见的一个输入区域（作用：提交表单的时候，携带一些固定的数据）

（3）常用属性

name  ：指定数据的名称

value  ：指定的是真正提交的数据值

6、提交按钮

（1）格式

 ①<button>确认</button>（注意：button标签的默认type值为submit）

 ②<input type="submit" value="确认">

（2）注意事项

①button标签的type属性默认值为submit

②button不要指定name属性

③input标签编写的按钮，使用value属性指定按钮文字

7、重置按钮

（1）格式

①<button type="reset">重置</button>  

②<input type="reset" value="重置">

（2）注意事项

①button不要指定name属性

②input标签编写的按钮，使用value属性指定按钮文字

8、普通按钮

（1）格式

<button type="button">普通按钮</button>

<input type="button" value="普通按钮">

（2）注意事项

普通按钮的type的值为button，若不写type值是submit，则会将表单提交

9、文本域

（1）格式

<textarea name="other" cols="20" rows="5"></textarea>

（2）常用属性

rows  ：指定默认显示的行数，会影响文本域的高度（初始值，但运行页面也可放大缩小，后期可通过css调整）

cols  ：指定默认显示的列数，会影响文本域的宽度（初始值，但运行页面也可放大缩小，后期可通过css调整）

（3）注意事项

不能编写type属性，其他属性与普通文本输入框一致

10、下拉框

（1）格式

<select name="grade">

     <option value="one">1班</option>

     <option value="two" selecteds>2班</option>

</select>

（2）常用属性

name  ：指定数据的名称

option  ：设置value属性，如果没有value属性，提交的数据是option中间的文字；如果设置了value属性，提交的数据就是value的值（建议设置value属性）

option标签设置了selected属性，表示默认选中

11、禁用表单控件

（1）格式

 <input disabled type="text" name="acount" value="zhangsan" maxlength="10">

（2）使用场景

input、textarea、button、select、option等标签都可设置disabled属性

12、label标签

（1）作用

label标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点

（2）两种与label关联方式：

①让label标签的for属性的值等于表单控件的id

<label for="zhanghu">账户：</label>

<input id="zhanghu" type="text" name="acount" value="zhangsan" maxlength="10">

②把表单控件套在label标签的里面

<label>

      密码：

      <input type="password" name="pwd" value="123" maxlength="5">

</label>

13、fieldset与legend的使用（了解即可）

（1）作用

fieldset可以为表单空间分组，legend标签是分组的标题

（2）使用

<fieldset>

     <legend>主要信息</legend>

     <label for="zhanghu">账户：</label>

     <input id="zhanghu" type="text" name="acount" value="zhangsan" maxlength="10">

     <br>

     <label>

            密码：

            <input type="password" name="pwd" value="123" maxlength="5">

     </label>

</fieldset>