HTML表单总结

表单作用

输入框，在浏览器上收集用户的信息。

 

表单的所有标签

<form> 、 <input> 、<button>、<textarea>、<select>、<option>

 

<form>标签

有表单一定有<form>标签，表单的标签一定放到<form>内。<form> 和 表格的<table> 标签都是这样的。

<form>属性：

1.name 属性

name属性给表单进行命名，用于区分页面上的不同表单。

2.method属性

表单数据用哪种http提交方式。用get 和 post ，一般都用post。

3.action属性

表单数据提交到哪一个地址进行处理。

   <form action="index.php"></form>

4,tager属性

和<a>标签的target属性是一样的，指定特定创库的打开方式。

其属性值有：

_self    在原来的窗口打开

_blank   在新的窗口打开

_parent   在父窗口打开

_top   在顶层窗口打开

5.enctype属性

数据提交编码方式，上传文件需要用。

 

文本框

单行文本框 和 密码框

        <input type="text" value = "我是文本框默认值" size = "20" maxlength="20"> <br>
        <input type="password" value = "我是文本框默认值" size = "20" maxlength="20">

它两都有属性value(文本框默认值) 、 size(文本框长度，可用CSS替代) 、 maxlength(最多输入的字符数)。

 

多行文本框

  <textarea name="" cols="列数" rows="行数" value = "取值">我是多行文本框默认内容</textarea>

 

选择框

1.单选框

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

name属性值为单选框命名，checked 表示默认选中

 

2.复选框

        <input type="checkbox" name = "fruit" value = "苹果" checked>苹果
        <input type="checkbox" name = "fruit" value = "香蕉">香蕉
        <input type="checkbox" name = "fruit" value = "西瓜" checked>西瓜
        <input type="checkbox" name = "fruit" value = "荔枝">荔枝

name属性值为复选框命名，checked 表示默认选中

 

3.下拉列表

        <select name="" size="5" multiple>
            <option value="C">C</option>
            <option value="C++" selected>C++</option>
            <option value="python">python</option>
            <option value="java" selected>java</option>
            <option value="HTML">HTML</option>
            <option value="CSS">CSS</option>
        </select>

效果：

<select> 和 <option> 配合使用来实现下拉列表，和 <ul> 与 <ol>  配合使用实现无序列表有点像。

<select>有两个常用属性 multiple(下拉列表可以选择多项) 、 size(下拉列表显示几个列表项)

<option>有两个常用属性 select(默认选中) 、 size(选项值)

 

按钮

        <input type="button" value="我是普通按钮">
        <input type="submit" value="我是提交按钮">
        <input type="reset" value="我是重置按钮">
        <button>我是button标签，可我基本不会用</button>

普通按钮：配合JS进行各种操作。

提交按钮：提交<form> 内的数据。

提交按钮：清除<form>内的内容。

 

文件上传

        <input type="file">