第三章表单

奋怒的少年猪猪

已于 2023-09-06 11:06:12 修改

阅读量68

点赞数

分类专栏： HTML5基础和CSS基础文章标签： html5

于 2023-05-30 10:14:43 首次发布

本文链接：https://blog.csdn.net/ddd_22/article/details/130942471

版权

HTML5基础和CSS基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、声明表单

<!--描述：表单
①属性:enctype="multipart/form-data"上传文件和与后端连接使用；
②属性mentod的提交方式
      post:不会改变地址栏的状态，表单数据不会被显示
      get：地址栏状态会发生变化，表单数据会在URL信息中显示；
③属性action:将数据送到那里去 -->
<form method="post" action="#" enctype="multipart/form-data">
</form>

二、表单元素

一、通用表单元素

1.默认文本框与密码框

<!--描述：行内元素-input，单标签,默认值类型是文本框text-->
默认值:<input />

<!--描述：text:文本框；
①属性name指定表单元素的名称,后面根据name取值是数组,
②属性id后面根据id取值只能取值第一个；
③属性maxlength:type为text或password时，输入的最大字符数-->
文本框: <input type="text" name="text" id="text"  maxlength="20"/>

<!--描述:password:密码框，输入的数据显示黑色小圆点，有浏览器控件有查看功能；
属性size:指定表单元素的初始宽度，
当type为text或password时，表单元素的大小以字符为单位。
对于其他类型，宽度以像素为单位；-->
密码框:<input type="password" name="password" size="5"/>

在这里插入图片描述

2.复选框(多选)与单选按钮

<!--描述：radio：单选按钮；
①属性value：元素的初始值。type为radio时必须指定一个值；
②单选按钮只能选一个，不能取消，
如果name不同则可以选多个，所以他们的name必须一样视为一组；
③属性checked:type为radio或checkbox时，指定按钮是否是被选中-->
性别:
<input type="radio" value="man" name="sex" id="nan" checked/>男
<input type="radio" value="women" name="sex" id="nv"/>女

<!--描述：checkbox：复选按钮；
复选按钮可以选多个，可以取消，
所以他们的name必须一样为了后面学习获取数组进行操作-->
爱好:
<input type="checkbox" name="hobby" value="music" checked />音乐
<input type="checkbox" name="hobby" value="sport" checked/>运动
<input type="checkbox" name="hobby" value="read"  />阅读

在这里插入图片描述

3.多行文本域(已淘汰)与下拉框与上传文件

<!--描述：<select></select>声明下拉框
    <option></option>下拉框里的选项
 属性selected：默认选中-->
月份:
<select name="months">
    <option selected>请选择</option>
 <option value="0">1</option>
 <option value="1">2</option>
    <option value="2">3</option>
</select>

<!--描述：行内元素-<textarea></textarea>:多行文本域[已淘汰]
可以拉大小，不设置宽高时有滚动条
属性rows：控制宽
属性cols：控制高-->
多行文本域:<textarea rows="10" cols="20"></textarea>

<!--描述：file：文件域，
需要form表单设置属性enctype="multipart/form-data" -->
文件域:<input type="file" />

在这里插入图片描述

4.按钮

<!--描述：按钮
①sumbit：提交按钮，默认提交
②reset ：重置按钮，默认重置，重置到初始状态
③button：普通按钮，无效果，无默认值，可以添加事件
④image ：图片按钮 -->
<input type="submit"/>
<input type="reset"/>
<input type="button" value="按钮" />	
<input type="image" src="img/renren.gif"/>

在这里插入图片描述

二、HTML5新增的标签

1.邮箱

email:邮箱，会自动验证Email地址格式是否正确-->
邮箱:<input type="email" />

在这里插入图片描述

2.网址

<!--描述：url:网址，会自动验证URL地址格式是否正确
一个完整的网址三个部分：http://IP.PORT/网站名字
请求协议:
    http:普通网站
    https:加密网站
    ftp:上传下载文件网站
域名映射:IP是唯一的，PORT端口-->
网址:<input type="url" />

在这里插入图片描述

3.数字

<!--描述：number：数字
属性min：允许的最小值
属性max：允许的最大值
属性step：合法的数字间隔 -->
数字:<input type="number" min="" max="" step=""/>

在这里插入图片描述

4.滑块

<!--描述：range：滑块,有些浏览器是长方形，看控件解释-->
滑块：<input type="range" min="" max="" step=""/>

在这里插入图片描述

5.搜索框和文本一样

三、隐藏域

<!--描述：hidden：隐藏域，不想让用户看到的数据-->
<input type="hidden" value="666" name="userid" />

四、只读与禁用

<!--描述：readonly：只读，适用于文本 -->
只读:<input type="text" value="只能看不能修改"readonly/>

<!--描述：disabled：禁用，可以适用于任何标签，
禁用的表单不会打包带走-->
禁用:<input type="text" value="点都点不到" disabled/>
<input type="button" value="禁用按钮" disabled />

在这里插入图片描述

五、表单元素的标注

<!--描述：增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上-->
<label for="text01">文本：</label>
<input type="text" id="text01" />
<label for="text01">点我进文本框</label><br />
性别:
<input type="radio" value="man" name="sex" id="nan" checked/>
<label for="nan">男</label>
<input type="radio" value="women" name="sex" id="nv"/>
<label for="nv">女</label>

在这里插入图片描述

六、为什么进行表单验证

在这里插入图片描述

好处

①减轻服务器的压力
②保证数据的可行性和安全性

方法

1.文本框输入内容提示,适用于文本

<!--描述：placeholder：文本框输入内容提示,适用于文本
提示语默认显示，当文本框中输入内容时提示语消失-->
提示文本：<input type="search" placeholder="请输入文本内容" />

在这里插入图片描述

2.必填

<!--描述：required：必填项
规定文本框填写内容不能为空，否则不允许用户提交表单-->
必填文本：<input type="text" required />

在这里插入图片描述

3.正则表达式

<!--描述：pattern：正则表达式
①身份证组成:6+8+4
6城市:2+2+2：省市区，8生辰，4倒数第二位：奇为男，偶为女，最后一位0-10(X/x)之间
②手机号11位：1开头,[358]三个数字其中之一,\d{9}：9位，0-9之间 -->
正则表达式：<input type="text" pattern="^1[358]\d{9}"/>