HTML:form表单元素+input+代码效果 属性介绍 细心总结 非常全面详细 欢迎阅读

HTML表单元素

ps：form表单涉及请求传值操作 需要添加name属性

表单 form

• action： 表单提交的位置 网站或者请求处理地址

• method： 提交方式 get/POST

  • get： 可以在url中看到我们提交的信息 不安全但效率高

  • post： url中看不到我们的信息 可以传输大文件

    ​ 相对较为安全 但效率相对较低

问：post怎样可以看到提交信息？

答：按F12 ，点击Network，点击提交， 点击显示出的乱码文件 ，
翻到最下方 Form Data 可以看到提交内容

问：post安全？

答：是相对get安全 但后期可以通过后台加密使这里看不到信息 之后安全

input

• type 指定元素的类型

  • 包括：默认text，paaaword，checkbox，radio，submit， reset，file，hidden，hidden，image，button，
    • 文本输入框：input type=“text”
    • ​ 密码框： input type=“password”
    • ​ 提交按钮：input type=“submit”
    • ​ 重置按钮：input type=“reset”

• name：指定表单元素的名称

• value：元素的默认初始值。type为radio时必须指定一个值

• size：文本框长度

• maxlength：type为text或password时，输入的最大字符数

• checked：type为radio或checkbox时，指定按钮是否被选中

type

单选框

• 单选框：input type=“radio”

  • value：单选框的值

  • checked 默认选中

  • name:表示组， name一样就是一个组 ，一个组只能选一个

    ​ 没有组就不会形成单选！

<p>性别:
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>

多选框

• 多选框：input type=“checkbox”
  • checked 默认选中

<p>爱好：
    <input type="checkbox" value="guqin" name="hobby">琴
    <input type="checkbox" value="go" name="hobby">棋
    <input type="checkbox" value="calligraphy" name="hobby">书
    <input type="checkbox" value="painting" name="hobby">画
    <input type="checkbox" value="eat" name="hobby">吃
</p>

文本框

• 文本输入框：input type=“text”
  • value=“小梁在学习”：默认初始值小梁在学习
  • maxlength=“13”：最长能写13个字符
  • size=“25”： 文本框的长度25

<p>名字：<input type="text" name="uName" value="小梁在学习" maxlength="13" size="25"></p>

按钮

• input type=“button” 普通按钮
• input type=“image” 图像按钮
• input type=“submit” 提交按钮
• input type=“reset” 重置清空按钮

<!--提交按钮-->
<p>  <input type="submit"/> </p>
<!--重置按钮-->
<p>   <input type="reset"/> </p>

<!--自定义按钮-->
    <p>
        <!--文字按钮 默认只能点击-->
        <input type="button" name="btn" value="点击这里"/>

        <!--图片按钮 提交功能-->
        <input type="imagesrc="../resources/image/1.jpg"/>
    </p>

列表框

• 列表框(下拉框) select

  • ​ option： 选项

  • selected ：默认选中

   <p>地址：
        <select name="address">
            <option value="sahnxi">山西</option>
            <option value="shanghai">上海</option>
            <option value="sichuan">四川</option>
            <option value="beijing">北京</option>
            <option value="guangzhou" selected>广</option>
        </select>
    </p>

文本域

• 文本域：textarea
  • cols=“30” ：横着 行
  • rows=“15”： 竖着 列

<p>评价
     <textarea name="textarea" cols="30" rows="15">文本内容	  </textarea>
    </p>

邮件

邮件验证：input type=“email” 功能性标签

自带格式要求 但是验证不准确 不是标准的邮件格式

存在漏洞 后期会在后台规定格式从而解决

<p>邮箱：
    <input type="email" name="email">
</p>

URL

URL：input type=“url”

• 网址标签。为空也可以提交成功

	 <p>URL：
        <input type="url" name="url">
    </p>

数字

数字：input type=“number”

• max：最大值
• min：最小值
• step：间隔
  • 例子：step=“10”， 则数字可为： 0、10、 20、 30…

    <p>商品数量：
    <input type="number" name="num" max="100" min="0" step="1">
    </p>

滑块

滑块：input type=“range”

• max：最大值
• min：最小值
• step：间隔
  • 例子：step=“10”， 则数字可为： 0、10、 20、 30…

    <p>音量：
        <input type="range" min="0" max="100" name="voice" step="5">
    </p>
    

搜索框

搜索框：input type=“search”

• 后面有个×号 可以点击清空

    <p>搜索：
        <input type="search" name="search">
    </p>

文件域

• 文件域：input type=“file”
  • name=“files” ：有name属性才能上传

<p>
    <input type="file" name="files">

</p>

代码

<h1>注册</h1>
<form action="1我的第一个网页.html" method="post">
    <!--input type="text" 文本输入框-->
    <p>名字：<input type="text" name="uName"></p>
    <!--input type="password" 密码框-->
    <p>密码：<input type="password" name="uPwd"></p>
    <p>  <input type="submit"> <input type="reset"></p>


</form>

表单的应用

隐藏域

隐藏：hidden

• 标签还存在 可以添加默认值

    隐藏：<input type="password" name="password"  value="123456" hidden>

只读

只读： readonly

  <input type="text" name="tname" value="小梁在学习" readonly>

禁用

禁用： disabled

• 禁止不让点 止可选择男

<p>性别:
        <input type="radio" value="boy" name="sex2" />男
        <input type="radio" value="girl" name="sex2" disabled/>女
    </p>

增强鼠标可用性

增强鼠标可用性：label

• 鼠标点击文字也可锁定到框
  • for表示一个id 可以指向一个位置

    <p>
    <label for="text">点我可以输入文字</label>
    <input type="text" id="text">
    </p>

效果

表单初级验证

placeholder提示信息

给用户的默认提示信息 ：placeholder

• 用于输入框的控件

 <p>
    名字：
    <input type="text" name="t2" placeholder="请输入用户名" >
    </p>

required 非空判断

required：元素不能为空 非空判断

<p>
名字：
<input type="text" name="t2" required>
</p>

pattern 正则表达式

正则表达式：pattern

• 自定义一个邮箱 百度 常用正则表达式
  • https://www.jb51.net/tools/regexsc.htm 正则表达式网址

 <p> 邮箱
        <input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>