【前端基础】HTML表单

Digital_Spring
92 阅读4分钟

HTML表单

一、什么是表单

表单在网页中主要负责数据采集功能

①表单域： <form name="" method="get/post" action=""></form> ②表单控件 ： <input type="text" value=""/> ③提示信息

二、表单的创建

<form method=“get或者post”  action=“向何处发送表单数据”> 
<!-- 创建表单 -->
<input  type=“” placeholder=“” name=“” value=“”/> <!– 输入框 -->
A.属性   type 定义输入框的类型
a)文本框  type="text“      密码框  type=“password“
b)提交框  type=“ submit“  和 <button>提交按钮</button>  一样
c)按钮框  type=“button“  单纯的按钮
d)重置框  type=“reset”清空的效果
B.属性   placeholder  描述输入字段预期值的简短的提示信息。兼容到IE8以上
C.属性   name 必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器
D.属性   value 值
</form>

三、Get和Post的区别

Form当中method的post和get的区别？

  1. get是从服务器上获取数据，post是向服务器传送数据。
  2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
  3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
  4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4（Internet Information Service 互联网信息服务）中最大量为80KB，IIS5中为100KB
  5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

四、H5新增的表单type属性值

<form>
    <p>
    邮件:<input type="email" multiple>
    </p>
    <p>
        用于用户输入和编辑URL:<input type="url">
    </p>
     <p>用于让用户输入和编辑URL
         <input type="url" name="url" id="b" required placeholder="填写地址">
    </p>
    <p>数字： 
        <input type="number" name="dianh" id="c" required placeholder="输入数字" max="11" step="3">
    </p>
    <p>单行滑块控件
        <input type="range" step="3" min="10" max="20">
    </p>
</form>

 <form action="" method="get">
        <p>日：<input type="date" name="" id=""></p>
        <p>月：<input type="month" name="" id=""></p>
        <p>年：<input type="week" name="" id=""></p>
        <p>时间： <input type="time" name="" id=""></p>
        <p>本地时间：<input type="datetime-local" name="" id=""></p>
        <p>世界时间：<input type="datetime" name="" id=""></p>
    </form>

五、H5新增加的表单验证属性

<!-- 取消验证novalidate，必须给form标签 -->
    <form action="" novalidate>
        <p>文本框：
            <!-- required验证输入不能为空，任何一个input都可以 -->
            <input type="text" name="" id="" required>
        </p>
        <p>密码框：
            <!-- placeholder输入框没有输入信息的默认显示 -->
            <input type="password" name="" id="" placeholder="请输入密码">
        </p>
        <p>邮件：
            <!-- autofocus打开页面时，该控件自动获得鼠标焦点，一个页面只允许有一个 -->
            <input type="email" name="" id="" autofocus>
        </p>
        <p>手机号：
            <!-- maxlength最大长度 -->
            <input type="text" name="" id="" maxlength="11">
        </p>
    </form>

六、H5新增加的表单标签

datalist提供一个事先定义好的列表，通过id与input关联，当在input内输入时就会有自动完成（autocomplete）的功能，用户将会看见一个下拉列表供其选择。

autocapitalize属性：

注：表单元素要必须有name属性。

输入的内容与所用的自动完成功能，是一个节省输入时间，同时也十分方便的功能

只有三种：on/off/""

 <form action="">
        <p><input type="text" list="words" autocapitalize="off" name="浏览器"></p>
        <datalist id="words">
            <option value="谷歌">谷歌</option>
            <option value="火狐">火狐</option>
            <option value="EDGE">EDGE</option>
        </datalist>
        <input type="submit" value="提交">
    </form>

image-20231108014338577.png 输出标签

 <form action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
        <input id="a" type="text">+
        <input id="b" type="text" value="50">=
        <output name="x" for="a b"></output>
    </form>

image-20231108015515901.png

七、表单新增加标签属性

标签和属性说明
1<fieldset></fieldset>fieldset表单字段集，相当于一个方框，fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象
2<legend></legend>字段集标题 必须要有字段集
3<label for="box"></label>label 提示信息标签 for="绑定控件id名"
4<input type="file"/>上传文件框 multiple="multiple" multiple属性可实现多选
5<input type="hidden"/>隐藏字段对于用户来说通常是不可见的，通常会存储一个默认值，通过js来修改
6<input type="radio" name=”sex”/>type="radio"单选按钮 单选按钮里的name属性必须写，同一组单选按钮的name属性值必须一样。
7<input type="checkbox" name="like" disabled="disabled" checked="checked"/>type="checkbox" 多选按钮 name可加可不加 checked="checked"(选中) disabled="disabled"禁用
8<select><option>北京</option><option>上海</option></select>下拉菜单
9<textarea cols="40" rows="5">文本域</textarea>文本域 cols="字符宽度" rows="行数
  1. 表单字段集
<fieldset>
  ssssssss
  <fieldset>
    sssssssss
  </fieldset>
  sss
</fieldset>

c16f26fc3a7249a9ace13148262dfff4.png

  1. 字段集标题 
    <fieldset>
   <legend>sss</legend>
   sssss
</fieldset>

38bf3b4f7d114c1fa47201dde66c4995.png

  1. label

    提示信息标签，对于表单一般用在单选和多选

    <!--label方法一-->
<label><input type="radio" name="sex">男</label>
<!--label方法二 只能用id-->
<input type="radio" name="sex" id="aa">
<label for="aa">女</label>

c9e81ad634b542ef902671a2d74c9713.png

  1. 上传文件 
    <input type="file">

e73d25dfa74449ee9fb2bc702f43de66.png 5. 单选按钮 圆形

如果只想选中一个，需要添加一个name属性，name的属性值要是一样的

```html
<input type="radio" name="nex">男<input type="radio" name="nex">女 
```

f0b0efe5445d4294ae935f19f0cb6bd3.png

  1. 多选按钮（复选）正方形
<p>
    <input type="checkbox" disabled="disabled"/>禁用
</p>
    <input type="checkbox" checked="checked"/>默认选中<br>
    <input type="checkbox">

93511d7e3bd4464fa3e6492c039d07e8.png

  1. 下拉菜单
<select>
    <option>30000-50000</option>
    <option>50000-70000</option>
</select>

a76544f45c34476583763ec45feadd2f.png

  1. 多行文本（文本域）

如何让一个输入框默认选中 在标签上添加一个checked属性 checked="checked" 默认选中 当属性名和属性值完全的一样的时候，可以省略为一个属性名 resizw:none; /* 禁止拖动 */

版权声明：本文为本博主在CSDN账号「Ein hübscher Kerl.」的首发原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

首发原文链接：blog.csdn.net/qq_54026286…

END

avatar
文章
阅读
粉丝