表单的基本用法

最新推荐文章于 2024-03-19 22:59:36 发布

柚子会一直发光的

最新推荐文章于 2024-03-19 22:59:36 发布

阅读量453

点赞数

文章标签：服务器 servlet 前端

本文链接：https://blog.csdn.net/m0_72699629/article/details/125859231

版权

form表单

1. input：定义输入框，按钮等，单标签。

type：定义input的类型(值不同对应的input的功能或样式都会发生改变。)

值：

text：定义文本输入框。

password：定义密码输入框。

button：定义可点击的按钮。

submit：提交按钮，会把表单内的数据提交给服务器。

reset：重置按钮，清除表单内所有的数据。

file：文件选择按钮，供文件上传。

accept：规定了文件上传的类型，text/*

image：定义图片形式的提交按钮，必须把src属性和image结合使用。

checkbox：定义复选框。

radio：定义单选框。

value：定义input的初始值。

required：输入内容是必须的，不能为空。

readonly：定义input为只读模式。

disabled：禁用input元素。

placeholder：定义文本输入框的提示音。

name：定义文本输入框的名字，唯一。

maxlength：最多可以输入多少字符。

size：定义宽度。

2.label：给input添加的标注。

for：为了让input和label进行绑定。

for的值要跟input的值相同，当点击label时，可以让input自动获得输入焦点。

运行结果：

3. password：定义密码输入框，输入的内容会被掩盖。

运行结果：

4.多行文本输入框

textarea：定义多行文本输入框。

name：规定文本区的名称。

cols：number，规定文本区内的可见宽度。

rows：number，规定文本区内的可见行度。

required：输入内容是必须的，不能为空。

readonly：定义input为只读模式。

disabled：禁用input元素。

maxlength：最多可以输入多少字符。

代码如下：

5.button：定义可点击的按钮。

value：按钮的标题

代码如下：

运行结果如图：

6. file：文件选择按钮，供文件上传。

accept：规定了文件上传的类型，text/*

代码如下：

运行结果：

7.checkbox：定义复选框

代码如下：

运行结果

8. radio：定义单选框。

代码如下：

运行结果：

8. fieldset：将表单内容进行分组，会产生一个边框(默认为2px边框，内边距(10px,12px)，左右外边距2px)；

legend：legend是fieldset元素定义的标题(默认在分组边框的上边框内，可以左右移动位置)；

代码如下：

运行结果：

9.分组下拉菜单

select：定义下拉菜单。

optgroup：定义选项组。

option：定义列表中的一个选项内容。

代码如下：

运行结果：

10.完整代码如下；

<!DOCTYPE html>
<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>form表单</title>
</head>
<body>
        <div>
            <label for="account">账号：</label>
            <input type="text" name="account" id="account" placeholder="请输入账号！" maxlength="10" size="10">
            <br>
            <label for="">密码：</label>
           
            <input type="password" name="password" id="password">
            <br>
            <textarea name="" id="" cols="100" rows="10" maxlength="30"></textarea>
            <input type="submit">
            <hr>
        </div>

        <div>
            <input type="file" accept="image/*">

            <br>
        </div>
        <label for="checkbox">复选框1</label>
        <input type="checkbox" id="checkbox1">
        <label for="checkbox">复选框2</label>
        <input type="checkbox" id="checkbox2">
        <br>
        你喜欢吃什么水果？
        <input type="radio" name="fruit1" id="fruit" value="苹果">
        <label for="fruit1">苹果</label>
        <input type="radio" name="fruit1" id="fruit" value="苹1果">
        <label for="fruit1">苹1果</label>
        <input type="radio" name="fruit1" id="fruit" value="苹2果">
        <label for="fruit1">苹2果</label>
        <input type="radio" name="fruit1" id="fruit" value="苹3果">
        <label for="fruit1">苹3果</label>

        <fieldset>
            <legend>分组标题</legend>
        </fieldset>
        <select name="" id="">
            <optgroup label="上午">
                <option value="1">上课1</option>
                <option value="2">上课2</option>
                <option value="3">上课3</option>
            </optgroup>
            <optgroup label="下午">
                <option value="1">上课1</option>
                <option value="2">上课2</option>
                <option value="3">上课3</option>
            </optgroup>
        </select>
        <select name="" id="">
            <option value="1">百度</option>
            <option value="1">百度</option>
            <option value="1">百度</option>
            <option value="1">百度</option>
            <option value="1">百度</option>
            <option value="1">百度</option>
            <option value="1">百度</option>
        </select>
    </form>
</body>
</html>