html中表单笔记

最新推荐文章于 2023-03-06 20:47:29 发布

yy@r

最新推荐文章于 2023-03-06 20:47:29 发布

阅读量274

点赞数 2

CC 4.0 BY-SA版权

分类专栏：表单文章标签： html5 表单

本文链接：https://blog.youkuaiyun.com/weixin_45489022/article/details/98438248

表单专栏收录该内容

1 篇文章

订阅专栏

1.什么是表单？

表单是用来用户提交信息，一般和表格联系起来使用，让用户填写相关功能，然后提交到服务器上。一个表单有三个基本组成部分：

1.表单标签 :这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

<form method="post" action="1.html" name="form2">

from标签最常用的三个属性是name(作用是令提交上去的表单数据可以被处理这些数据的程序识别)，action(用于指出表单需要提交到在这里插入代码片的url地址)，method(post方法相对于get方法安全些，默认get方式)
2.表单域 :包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。常常将表单域和<label>表单元素描述标签结合起来，用来实现用户点击“用户名”，“密码”等表单控件名时，表单域控件自动获取焦点

<input type="text" name="name" id="XH" value="" placeholder="此项不可为空" autofocus>      //autofocus自动获取焦点 ，placeholder设置提示信息或者默认值(占位符，类似于value属性)!

在这里插入图片描述

<label>用户名：<input type="text" name="user"></label> //此种方法适用于div中，使结构更紧凑


        <label for="user">用户名：</label>
        <input type="text" id="user" name="name">  //方法二适合表格布局，<input>中的id属性值要和<label>中的for属性值一致

a. input常用的三个属性是name，value(元素的默认值，当做占位符时被placeholder替代)和type，
type有十个常见可选属性值：

text ：单行的文本框，默认20个字符
password ：将文本替换为*文本框
checkbox ：复选框，name必须相同，id一定不同，返回数组，checked为默认值
radio ：单选按钮，name必须相同，id一定不同，checked为默认值
submit ：提交按钮，向服务器发送数据
button ：自定义按钮，多与js配合使用
hidden：为向服务器传送的预设值，隐藏域
image ：设置图像作为提交按钮来使用，属性src为路径，alt为说明
file：设置文件上传，上传文件时需要将from标签中的enctype属性的值更改为’multipart/form-data’,多文件上传时需要添加multiple属性，multiple 允许批量上传，与multipart/form-data配对
reset：重置按钮，将当前表单所有控件的值恢复到默认值

c.下拉框和分组：由select和option组成，用于限定用户选择范围，并且方便用户输入，常用三个属性分别为：select中的name属性确定变量名，option中的value属性确定变量值，option中的selected确定默认值，常与optgroup标签结合实现分组效果

 <select name="郑州市">
              <optgroup label="惠济区">       //label确定分组分组名称
                   <option  value="a">毛庄村</option>
                   <option  value="b">木马村</option>
             </optgroup>
             <optgroup label="金水区">
                    <option  value="c">弓寨村</option>
                    <option  value="d">杨庄村</option>
            </optgroup> 
</select>

在这里插入图片描述
d.文本域<textarea>:适合多行文本输入，用于留言等信息收集，常使用的属性有cols(每行最多显示多少个字符，以文字个数计算)，rows(可以显示多少行)，reasize(控制是否允许调整文本域的大小，both为默认值允许，none不允许，horizontal仅允许调整水平宽度，vertical仅允许调整垂直高度，该属性可以写入样式中，也可以直接加入到style中，只允许往大了调)

 <label for="ha"> 留言：</label>     
 <textarea id="ha" name="ma" cols="8" rows="8" style="resize: both;"></textarea>

e. 表单元素分组标签<fieldset>,子标签<legend>用来设置分组的标题
在这里插入图片描述
f. size：以字符计算的元素可见长度，表示该控件的长度
g. maxlength: 表示可输入的最长的字符数量长度
h. disabled: 禁用该控件
i. readonly：该控件只读，不允许修改

3. 表单按钮 :包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

<input type="submit" name="sub" value="登录">

4.html5中新增表单属性:
a.placeholder: 用于输入默认值或提示信息的，当做占位符时类似于value属性
value和placeholder的区别:

 <tr>
    <label for="XH">用户名：</lable>
    <input type="text" name="name" id="XH" value="此项不可为空">
</tr> 
<tr>
     <label for="XH">密码：</lable>
     <input type="text" name="name" id="XH" placeholder="此项不可为空">
 </tr>

在这里插入图片描述
b.autofoucus: 自动焦点，页面渲染时自动获取焦点

<input type="text" name="name" id="XH" placeholder="此项不可为空" autofocus>

c.required: 要求带有该字段为必填项，如果为空则无法提交并将焦点自动定位在上面

  <input type="text" name="name" id="XH" placeholder="此项不可为空" required>

d.pattern：模式属性或者正则属性，对输入内容进行正则验证
常用的正则模式如下：
在这里插入图片描述

  <label for="XH">密码：</lable>
  <input type="text" name="name" id="XH" placeholder="此项不可为空" pattern="[a-z]{3,6}">

在这里插入图片描述
e.list: 限定输入内容的列表，列表由<datalist>标签创建，其中list属性值要和datalist
f.min，max和step：input类型为数字(number)或日期时，设置取值范围和间隔
g.novalidate:用在<form>标签里，提交时不对数据进行验证，可以将所有的验证放在服务器端进行