表单form

登录输入框这些都属于表单

1.表单不能缺少的部分post和action

<!--
action：向何处发送表单,可以是一个网站，也可以是一个请求处理位置
method：规定如何发送表单数据（提交方式，常用get|post）
get：可以在url中看到我们提交的信息，不安全，但是高效
post：参数比较安全，传输大文件
-->
<form action="1.我的第一个网页.html"  method="post">
    <p>账号：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="password"></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
​
</form>

2.表单input相关属性

• type

  • text :文本

  • password：密码是不显示的一个个圆

  • checkbox：正方形打钩

  • radio：圆形圈(单选框，但是要name一样才是单选，比如说男女，他们的name值都写了sex那就只能选择一个name表示组，一般来说要初始化value)

  • submit：提交

  • reset：会重置内容

  • file：上传文件

  • hidden：隐藏

  • image：替换为图片（可以写src然后附上链接，这个点击图片相当于submit的效果）

  • button：正方形按钮(让按钮有名字就是在他的value值里面写，点击没有效果，because没有写)

• name

  • 这是之后java操作读取的主要内容

• value

  • 当为radio时必须指定一个初始值

• size（暂时不讨论，在css中讨论）

• checked

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

<!--
action：向何处发送表单,可以是一个网站，也可以是一个请求处理位置
method：规定如何发送表单数据（提交方式，常用get|post）
get：可以在url中看到我们提交的信息，不安全，但是高效
post：参数比较安全，传输大文件
-->
<form action="1.我的第一个网页.html"  method="post">
    <p>账号：
        <label>
        <input type="text" name="username"
               size="50"
                     maxlength="9"
                     value="我好帅">
         </label>
    </p>
​
    <p>密码：
        <label>
        <input type="password" name="password">
        </label>
    </p>
​
    <p>
        <input type="submit">
        <label>
            <input type="reset" >
        </label>
    </p>
​
</form>

2.1单选框

2.2多选框

<form action="1.我的第一个网页.html" method="get">
​
    <p><input type="radio" name="sex" value="man"> 男</p>
    <p><input type="radio" name="sex" value="woman"> 女</p>
​
    <p>
        <input type="submit">
        <input type="reset">
    </p>
​
</form>
<form action="1.我的第一个网页.html" method="get">
​
    <p><input type="checkbox" name="s" value="man"> 男</p>
    <p><input type="checkbox" name="s" value="woman"> 女</p>
​
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
​

3.下拉框(select)

<form action="1.我的第一个网页.html" method="get">
    <!--默认打开是哪个，就加selected，选项是option,打钩的那个就是checked-->
    
    
    <p>
        <select name="列表名称" id="啥">
            <option value="china">中国</option>
            <option value="ruishi">瑞士</option>
            <option value="miandian" selected>缅甸</option>
            <option value="yilake">伊拉克</option>
​
        </select>
    </p>
    <input type="submit">
</form>

4.文本域+文件域

<form action="1.我的第一个网页.html" method="get">
<!--
cols:列
rows：行
-->
    <p>
        <textarea name="textarea" id="" cols="30" rows="10">
        文本内容
        </textarea>
    </p>
    <input type="submit">
​
<!--file必须有name才能上传，否则上传不了-->
    <p>
        <input type="file" name="files">
        <input type="button" value="upload" name="上传">
​
    </p>
    
</form>

5.搜索框滑块和简单验证已经邮箱

5.1邮箱+网址+数字验证

只要有@+随便就可以通过否则就会提示你，比较简单

<form action="1.我的第一个网页.html" method="get">
​
    <p>邮箱：
        <input type="email" name="email">
    </p>
    <p>网址：
        <input type="url" name="url">
    </p>
    <p>数字：
        <input type="number" name="num" max="100" min="10"
        step="10"
        >
    </p>
    <input type="submit">
​
​
</form>

5.2简单滑块

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

5.3搜搜

可以搜索，比较方便

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

表单的简单应用

1.只读onlyread 只能看，不能修改

2.禁用diabled 不能选

3.隐藏hidden

4.增强鼠标可用性 lable标签，点文字到框里

   <p>
        <label for="mark">搜索框：
            <input type="search" id="mark" >
        </label>

    </p>