CSS入门篇18.表单

大白菜·

已于 2022-09-04 20:02:23 修改

阅读量643

点赞数 4

文章标签： css javascript html 前端 java

于 2022-09-04 20:02:03 首次发布

本文链接：https://blog.csdn.net/m0_62404129/article/details/126693580

版权

创建表单关键字：form

action:表单信息提交的地址

method:表单提交的方式；

可选值：post：将表单数据包含在表单体发送：更安全，所以常用与敏感数据的传送

get：将表单数据随着action提交的路径以？相隔的形式传输，不安全

autocomplete:设置表单内容是否可以自动填充

可选值：

on：默认值；可以自动填充

off：取消自动填充;

自动填充的前提条件：input要有name属性

target：设置跳转页面在哪个页面显示

可选值：_blank:在新页面展示

_self:默认值，在原先页面显示

_parent\_top?今天二选一总结一下效果

novalidate：设置表单不自动验证信息格式是否正确

input

type:设置类型的

常用的类型：text（文本输入框）、password(密码)、checkbox（复选框）、radio(单选框)、

button（普通的按钮)、submit(提交按钮)、reset（重置按钮）、file（文件）

新添加的类型：

date：设置日期可以通过value设置初始日期，格式：1988-02-03

color：颜色设置

email:邮箱，提交表单时可以自动验证邮箱格式是否正确-->

button标签：

type:button(普通按钮)

submit（提交按钮）

reset（重置按钮）

总结一下：与input设置按钮，button设置更灵活

标签的属性

1.value：设置一个默认值

2.checked ：设置默认选中

3.disabled:设置不可操作的内容

4.readonly:只读属性

5.placeholder：设置提示词，注意不要和value一起使用

6.required:设置一个必选项

7. minlength/ maxlength:设置文本长度的限制

8.multiple:设置上传文件可以是多个

代码演示为：

<!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>表单</title>
</head>

<body>
   
    <div>
        <form action="./form1.html" method="post" autocomplete="on">

            姓名：<input type="text"  name="" id="" placeholder="请输入中文姓名" minlength="3" maxlength="8"><br>
            密码：<input type="password" required><br>
            喜好:<input type="checkbox">读书
            <input type="checkbox">睡觉
            <input type="checkbox">上课<br>
            日期：<input type="date" name="" id="" value="1988-02-03"><br>
            颜色：<input type="color" name="" id=""><br>
            邮箱:<input type="email">
            <!-- 注意：单选框要有name属性，且属性值相同 
            label:为了提高用户的体验效果，通过for来选择要作用的标签；for值=作用标签的id值-->
            性别：<label for="nan"><input type="radio" name="sex" id="nan">男</label>
            <input type="radio" name="sex" checked>女<br>
            <input type="file" multiple><br>
            <!-- <input type="button">这是button按钮
    <input type="reset">重置
    <input type="submit">提交 -->
    <!-- 下拉框：select 里面的选项是通过option来设置的-->
<select name="" id="">
<option value="">英语</option>
<option value="">数学</option>
<option value="语文">语文</option>
</select><br>

 <textarea name="" id="" cols="10" rows="30">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, consectetur perspiciatis repellendus quaerat consequuntur modi omnis ullam totam impedit doloribus inventore voluptate enim quisquam quo cumque, ut laborum dolores. Cumque, expedita sunt ipsa quis dolor explicabo cum molestias incidunt facilis porro sequi saepe natus aspernatur nobis odio vel eligendi iure.
</textarea> -->
            <button type="submit">提交</button>

<input list="data" name="data">
            <datalist id="data">
                <option value="语文"></option>
                <option value="数学"></option>
            </datalist>
        </form>
    </div>
</body>

</html>

效果图为：

大白菜·

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
CSS入门篇18.表单

常用的类型：text（文本输入框）、password(密码)、checkbox（复选框）、radio(单选框)、button（普通的按钮)、submit(提交按钮)、reset（重置按钮）、file（文件）可选值：post：将表单数据包含在表单体发送：更安全，所以常用与敏感数据的传送。date：设置日期可以通过value设置初始日期，格式：1988-02-03。email:邮箱，提交表单时可以自动验证邮箱格式是否正确-->总结一下：与input设置按钮，button设置更灵活。
复制链接

扫一扫