前端学习笔记76-表单补充

前端学习笔记76-表单补充

  • input
  • submit
    • button
    • reset
  • button
  • color
  • email
  • autocomplete属性
  • readonly属性
  • disabled属性
  • autofocus属性

input

submit

这个上一节讲过,不赘述。

button

这个和submit不同,它是一个普通按钮。

reset

这个是重置按钮。


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>


head>

<body>

    <form action="target.html">
        <input type="text">
        
        <input type="button" value="按钮">
        
        <input type="reset">
    form>
body>

html>

在这里插入图片描述

button

这个和input一样,有submit、button、reset,且功能一样。


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>


head>

<body>

    <form action="target.html">
        <input type="text">
        <button type="submit">提交按钮button>
        <button type="reset">重置按钮button>
        <button type="button">按钮button>
    form>
body>

html>

在这里插入图片描述
不同的地方是input是自结束标签,而button是成对出现的。所以button里可以放图片等其他东西,用起来更灵活。

color

这个可以在网页选择颜色。

    <form action="target.html">
        <input type="color">
    form>

前端学习笔记76-表单补充_第1张图片
它的缺点就是兼容性。IE好像不支持这个。

email

用这个,当我们输入内容点击提交时,它会判断是不是符合格式。

    <form action="target.html">
        <input type="email">
        <input type="submit">
    form>

前端学习笔记76-表单补充_第2张图片
虽然这个在IE中可以用,但是显示的效果不大一样,所以少用。

autocomplete属性

这个是input的属性
看下图
前端学习笔记76-表单补充_第3张图片
当我输入12,并提交后,下次鼠标移入文本框时,会有我上次输入的数据。这个有时候并不是我们需要的,这个时候就可以用autocomplete。

       <input type="text" name="us" autocomplete="off">
       <br>
       <input type="text" name="us">
       <br>
       <input type="submit"> 

前端学习笔记76-表单补充_第4张图片
前端学习笔记76-表单补充_第5张图片
可以看到,第一个文本框没有提示信息了,但是第二个由于我没有设置autocomplete,所以还有。如何批量处理呢?
写在form里。

    <form action="target.html" autocomplete="off">
       <input type="text" name="us" >
       <br>
       <input type="text" name="us">
       <br>
       <input type="submit"> 
    form>

前端学习笔记76-表单补充_第6张图片

readonly属性

这个为将表单项设置为只读。

    <form action="target.html" autocomplete="off">
       <input type="text" name="us" value="dfaed" readonly>
       <br>
       <input type="text" name="us">
       <br>
       <input type="submit"> 
    form>

在这里插入图片描述
从结果可以看到,只能读value值,不能输入。

disabled属性

这个是将表单项设置为禁用。
这个和readonly功能差不多。不过当我们点击提交按钮时,readonly可以提交成功,disabled则没有提交。

autofocus属性

设置表单项自动获取焦点。
直接看代码

    <form action="target.html" autocomplete="off">
       <input type="text" name="us" >
       <br>
       <input type="text" name="us" autofocus >
       <br>
       <input type="submit"> 
    form>

前端学习笔记76-表单补充_第7张图片
刷新页面,发现光标自动在第二个。

内容还是有点杂,记记笔记有点印象就行。

你可能感兴趣的:(小白前端学习,html,css)