html中表单笔记

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>标签里,提交时不对数据进行验证,可以将所有的验证放在服务器端进行

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值