form基础表单总结

form基础表单总结

一、form表单用户搜集用户输入内容。

form表单的相关属性:

1.action:此属性表示提交表单时要执行的操作,通常是将表单数据提交到服务器处理表单数据的文件脚本中。

2.target:此属性表示在提交表单之后,服务器相应数据在何处显示。

默认值是_self,表示在当前窗口显示,值_blank表示在新窗口中显示。

3.method:此属性表示提交表单时要使用的HTTP方法。

可选值有get和post两种,默认值是get。

get与post的区别:

get post
表单数据以键值对的方式追加到URL中 表单数据不会追加到URL,回附加到HTTP请求的正文中
URL的长度受到限制(2048个字符) 没有限制
用于提交非敏感数据 可提交敏感数据(如密码)

4.autocomplete:此属性表示是否开启表单自动补全,如果开启则浏览器会根据之前用户输入的值自动补全值。默认是开启的,可选值值有on(开)、off(关)。

5.novalidate:此属性表示表单提交时是否不进行表单验证,如果设置,则表示不进行表单验证。

默认是进行表单验证的。

<form target="_self" method="get" autocomplete="on">
        用户名:<br>
        <input type="email">
        <input type="submit">
</form>

email在提交时会进行验证邮箱格式是否正确,如果不正确,则不会进行提交并给予提示。

form基础表单总结

如果设置了novalidate属性且为真,则不会进行表单验证。

<form target="_self" method="get" autocomplete="on" novalidate="true">
        用户名:<br>
        <input type="email">
        <input type="submit">
</form>

form基础表单总结

 二、表单的相关元素

1.ladel标签 

ladel标签改进了对鼠标用户的可用性,它能够使鼠标点击标签的文本触发输入框获取焦点。也能够使按钮触发点击事件。

其中label标签的for属性指定的字段要与相应input标签的id字段相同,才能生效。也可以不设置for和id字段,则包裹内生效。

总之:如果label标签没有包裹input标签,则必须设置for和id对应字段才能生效;如果label标签包裹了input标签,则可以不设置for和id字段也会生效(注意是都不设置)。

<form target="_self" method="get" autocomplete="on" novalidate="true">
        <label>用户名(不包裹,不使用for和id)</label><input type="text"><br>
        <label for="myInput1">用户名(不包裹,使用for和id)</label><input type="text" id="myInput1"><br>
        <label>用户名(包裹,不使用for和id)<input type="text"></label><br>
        <label for="myInput2">用户名(包裹,使用for和id)<input type="text" id="myInput2"></label>
</form>

form基础表单总结

 2.input标签

input元素可以通过设置不同的type属性值,显示不同的状态。input标签通常要设置name字段以指定向服务器提交字段时的名称、设置value字段表示提交值。

type值 作用 相关属性介绍
text 普通文本输入框 设置name属性表示提交数据名称;value表示输入初始值
password 密码输入框,默认输入值不可见,*号代替 设置name属性表示提交数据名称;value表示输入初始值
submit 定义提交form表单提交按钮 设置value属性表示按钮显示名称,不设置默认显示"submit"
radio 单选按钮 设置name和value属性表示相关提交数据,并且同一name属性值表示为一组内容;设置checked属性表示直接选中
checkbox 多选按钮 设置name、value、checked属性作用同radio
button 使用input定义普通按钮 设置value表示按钮显示名称
<form target="_self" method="get" autocomplete="on" novalidate="true">
        <label for="myInput1">
            用户名:<input type="text" id="myInput1" value="张三">
        </label><br>
        <label for="myInput2">
            密码:<input type="password" id="myInput2" value="123456789">
        </label><br>
        <label>
            性别:
            男:<input type="radio" name="radio1" value="男">
            女:<input type="radio" name="radio1" value="女">
        </label><br>
        <label>
            爱好:
            看剧:<input type="checkbox" value="看剧" name="hobby">
            追番:<input type="checkbox" value="追番" name="hobby">
            打游戏:<input type="checkbox" value="打游戏" name="hobby">
            内卷:<input type="checkbox" checked value="内卷" name="hobby">
        </label><br>
        <input class="btn" type="button" value="我是按钮"><br>
        <input type="submit" value="文本显示(提交)">
</form>

form基础表单总结

HTML5新增的输入类型:

类型 作用 展示
number 限制输入为数字才能生效 form基础表单总结
email 限制输入为邮箱才能生效 form基础表单总结
color 获取焦点后会弹出颜色选择器 form基础表单总结
date 日期选择器会出现在输入框中 form基础表单总结
range 能够显示滑块字段 form基础表单总结
month 日期选择器(月份) form基础表单总结
week 日期选择器(周) form基础表单总结
time 时间选择器 form基础表单总结
datetime 时间选择器 测试的时候没有生效
datatime-clocle 日期选择器 form基础表单总结
tel 电话输入 form基础表单总结
url 在提交时能够自动验证 url 字段。 form基础表单总结
search 用于搜索字段(搜索字段的表现类似常规文本字段)

input的输入限制属性:

属性 描述
disabled 规定输入字段应该被禁用。
max 规定输入字段的最大值。
maxlength 规定输入字段的最大字符数。
min 规定输入字段的最小值。
pattern 规定通过其检查输入值的正则表达式。
readonly 规定输入字段为只读(无法修改)。
required 规定输入字段是必需的(必需填写)。
size 规定输入字段的宽度(以字符计)。
step 规定输入字段的合法数字间隔。
value 规定输入字段的默认值。

3.select标签与option标签

<select>用于包裹<option>生成下拉选择框。name属性指定提交名称,id可以配合<label>的for属性实现鼠标点击优化。

4.fieldset标签与legend标签

<fieldset>可用于数据分组,<legend>可以设置标题。使用fieldset分组的表单将会显示区别于部分组的样式,如 被边框包裹。

5.textarea标签

<textarea>表示一个多行纯文本编辑器,可以用于用户输入。可以设置id属性与<label>实现鼠标点击优化,cols和rows属性可以设置编辑器显示大小。

<form>
        <fieldset>
            <legend>填写用户信息</legend>
            <label for="user">用户名:</label>
            <input type="text" id="user"><br>
            <label for="password">密码:</label>
            <input type="text">
        </fieldset>
        <label for="mySelect">我的select</label><br>
        <select id="mySelect" name="number">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected>3</option>
        </select><br>
        <label for="myText">我的textarea</label><br>
        <textarea name="textarea" id="myText" cols="30" rows="10"></textarea>
</form>

form基础表单总结

声明:本站所有文章,如无特殊说明或标注,均为爬虫抓取以及网友投稿,版权归原作者所有。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧