12 form表单

form表单

一、form标签

表单，可以用来提交数据

form 是一个块标签

1. action 属性，数据要提交到服务器地址，一般是接口地址

2. method 属性，数据的提交方式

   他的值有
   get，post，put，delete 等

   • get:get请求可以把数据拼接到 接口地址的 url上，缺点是，不安全，提交的数据较少
   • post：post请求，在post提交的数据信息中，不会看到提交的数据结构，相对于get是安全的，并且提交的数据较大

二、lable 标签

行标签，经常和input搭配使用，表示input的标题

三、input 标签

行标签，输入框，常用表单输入

input 属性,input虽然是行标签，但是可以设置宽高

1. type属性，用来设置输入框类型

   属性值

   第一部分

   • text 文本输入框
   • password 密码输入框
   • button 普通按钮
   • submit 提交按钮
   • reset 重置按钮
   • radio 单选框
   • checkbox 多选框
   • hidden 隐藏框
   • file 提交文件
   • number 输入数字

   第二部分

   • email 约束输入内容为邮箱

     邮箱：<input type="email" value="" autofocus>
     <!-- autofocus 自动获取光标，自动聚焦。默认设置一个 -->
     

   • url 约束输入内容为网址

     网址：<input type="url" value="">
     

   • number 约束输入内容为数字

     年龄：<input type="number" value="" step="10">
     <!-- step 属性为，每次的步长 -->
     

   • color 取色器

     取色器：<input type="color" value="">
     

   • range 滑竿

     滑竿：<input type="range" min="0" max="100" value="10">
     <!-- min 最小值
     max 最大值
     value 当前值 -->
     

   • date 显示日期

     日期：<input type="date" value="">
     

   • month 显示日期到月

     月份：<input type="month" value="">
     

   • week 显示当前周

     周：<input type="week" value="">
     

   • time 显示时间

     时间：<input type="time" value="">
     

   • datetime-local 设置当地时间

     设置当地时间<input type="datetime-local" value="">
     

   • image 图片提交按钮

     <input type="image" width="100" src="../src/zyl1.jpg">
     

2. value属性，设置input的值

3. name属性，对于界面显示没有任何影响，主要用于数据交互，实质上name的值既是后台数据的字段名

4. placeholder 属性，输入框的提示信息

5. maxlength 属性，输入字符的最大长度

6. minlength 属性，输入字符的最小长度

7. required 属性，设置为必填项

8. autofocus 自动获取光标，自动聚焦。默认设置一个

9. step 属性,为每次的步长

10. checked 属性，单选框和复选框的默认选中，只需要在input 上设置checked 属性即可

11. disabled 属性，禁用某一个input 标签，只需要给input 添加 disabled 属性即可

12. readonly 属性，给某一个输入框添加只读属性 readonly，确保该输入框内容可以通过程序修改，并且能提交到后台

disabled和readonly 的异同：

同：他们都不能手动修改

异：不同的是 disabled 的值不能提交和使用，readonly的值可以提交到后台

四、select 标签

下拉框（行标签）

五、option 标签

select标签的子级必须是 option 标签，每一个 option 标签表示一个选项，option 标签具有value属性

六、fieldset 标签

创建一个组

七、legend 标签

组的标题

八、textarea 标签

多行文本输入框

属性

• rows 设置具有多少行
• cols 设置具有多少列