HTML表单

HTML表单

一、什么是表单：所谓表单就是页面中用于采集用户信息的页面元素，包含两个部分：表单域、表单元素

1.表单域：所谓表单域就用用来盛装表单元素的容器，标签为<form></form>常见属性有

​ 1) action：设置表单信息提交地址

​ 2) method：设置表单信息提交方式，get、post

​ get：默认，以地址栏内容的形式提交数据，不安全、数据量小

​ post：以页面主体内容的形式提交

​ 3) target：设置目标文件的打开方式，属性值为_self或_blank

​ 4) name：设置表单的名称

2.常见的表单元素

​ 1) 文本框：<input type=”text”>，常用属性

​ placeholder：设置文本框中的提示文字

​ name：设置表单元素名称

​ value：要向服务器提交的值，且value也具有提示文字的作用

​ 2) 密码框：<input type=”password”>，常用属性

​ name：设置表单元素名称

​ value：要向服务器提交的值

​ 3) 单选框：<input type=”radio”>，常用属性为

​ name：设置表单元素名称，注意name的值必须相同

​ value：设置要向服务器提交的值

​ checked：设置默认选项，属性值和属性名相同

​ 4) 多选框：<input type=”checkbox”>，常用属性为

​ name：设置表单元素名称，注意name的值必须相同

​ value：设置要向服务器提交的值

​ checked：设置默认选项，属性值和属性名相同

​ 5) 文件域：<input type=”file”>，常用属性

​ name：设置表单元素名称

​ 6) 隐藏域：<input type=”hidden”>，常用属性

​ name：设置表单元素名称

​ value：设置要向服务器提交的值

​ 7) 提交按钮：<input type=”submit”>，常用属性为value，作用是设置按钮上的提示文字

​ 8) 重置按钮：<input type=”reset”>，常用属性为value，作用是设置按钮上的提示文字

​ 9) 普通按钮：<input type=”button”>，常用属性为value，作用是设置按钮上的提示文字

​ 10) <button></button>标签，常用属性为type，属性值为submit（默认），reset、button

​ 11) 图像域：<input type=”image”>，常用属性src，作用是设置图片所在路径

​ 12) 下拉菜单:

<select>

       <option>选项1</option>

       ….

</select>

​ 常用属性为

​ name：设置表单元素名称

​ value：要向服务器提交的值

​ selected：默认选项，属性名和属性值相同

​ 13) 文本域：也称为多行文本框<textarea></textarea>，常用属性有

​ name：设置表单元素名称

​ cols：设置列宽

​ rows：设置行数

​ 14) 表单字段集

<fieldset></fieldset>

​ 15) 表单字段集名称:<legend></legend>

<!-- 表单字段集 -->
            <fieldset>
            <!-- 表单字段集名称 -->
                <legend>个人简介</legend>
                用户名：<input type="text" placehoder="请输入用户名" name="user"><br>
                密码：<input type="password" name="psd"><br>
                性别：<input type="radio" name="gender" value="male" checked="checked">男
                      <input type="radio" name="gender" value="female">女<br>
            </fieldset>

二、表格和表单的结合应用

​ 表格常用代码：table>tr*6>td*6+tab键