HTML表单元素--input输入类型（1）

深藏阁楼爱情的钟 2022-02-14 03:08 539阅读 0赞

## HTML表单元素–input输入类型 ##

**HTML表单用于搜集不同类型的用户输入 其中最常用到的就是input元素。**

1.< form >元素：素定义 HTML 表单。其属性有action=“要提交的地址” method=" 提交的方式" 属性值有：get 和 post

2.< input >元素：最重要的表单元素，有很多type属性

3.文本框：< input type=“text” > 定义用于文本输入的单行输入字段

<form action="" method="post">   
        <input type="text">  
        <br>
        <input type="text" value="我是文本框">  
        <br>
        <input type="text" value="我是文本框" readonly>  
        <br>
        <input type="text" placeholder="我是文本框">  
        <br>
        <input type="text" placeholder="我是文本框" maxlength="5"> 
        <br>
        <input type="text" placeholder="我是文本框" size="20">  
        <br>
        <input type="password" placeholder="输入密码" >  
        <br><br>
        
        <textarea name="多行文本框" id="" cols="30" rows="10">我是多行文本框</textarea>
    </form>

![在这里插入图片描述][20190425172539956.png]

4.单选按钮输入：< input type=“radio” >单选按钮允许用户在有限数量的选项中选择其中之一

<form action="" method="post">
    
        <p>你最喜欢的编程语言是？</p>
        <input type="radio" name="a" checked>JAVA  
        <input type="radio" name="a">C++
        <input type="radio" name="a">PHP
    </form>

![在这里插入图片描述][20190425172705320.png]  
**注：每个name值要一致**

5.提交按钮：表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。< input type=“submit” >

6.重置按钮：用来重置文本框输入的数据 < input type=“rest” >

![在这里插入图片描述][20190425172640754.png]

7.复选框：可以选择多个值 < input type=“checkbox” >

<form action="" method="post">
    <p>你最喜欢的编程语言是？</p>
    <input type="checkbox" checked>JAVA  
    <input type="checkbox">C++
    <input type="checkbox">PHP
    </form>

![在这里插入图片描述][20190425172607314.png]  
8.下拉框：< select >

<form action="" method="post">
    <p>你最喜欢的水果是？</p>
        <select name="" id="">
            <option value="">苹果</option>
            <option value="">香蕉</option>
            <option value="">哈密瓜</option>
        </select>
    </form>

![在这里插入图片描述][20190425172409843.png]

9.密码框：用来输入密码

**还有很多元素和属性可能没讲解到，关注我会继续跟新。希望对大家有所帮助**

[20190425172539956.png]: /images/20220214/7f3773a274bd41b0acd15f1b04733ba2.png
[20190425172705320.png]: /images/20220214/ca4487791b1a4ab1bda4d7dbe350aa3f.png
[20190425172640754.png]: /images/20220214/a99a929b3b414275bfa616cc09b3064a.png
[20190425172607314.png]: /images/20220214/94273ec1635842bcba6da0e827827469.png
[20190425172409843.png]: /images/20220214/718c9b5bc72342f3b82671fcb763a321.png