前端 HTML ：如何创建网页 03

最新推荐文章于 2024-07-25 11:52:08 发布

南风和云

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量117

点赞数

文章标签： html

本文链接：https://blog.csdn.net/A15535286714/article/details/117533193

版权

六.表单（form）

1.输入（input）

因为 name 属性是前后端数据交互的过程，用户输入不加name属性，后端就无法接收到数据

<body>
<form action="https://www.baidu.com/s">
    <input type="text" name="wd">
    <input type="submit" value="提交">
<!--    name属性：前后端数据交互的过程，用户输入不加name属性，后端就无法接收到数据-->
</form>
</body>

2.文本框

placeholder 是显示的提示

用户名：<input type="text" name="user" placeholder="请输入用户名">

在这里插入图片描述

（1）单选框（radio）

    <input type="radio" name="sex" values="male"> 男
    <input type="radio" name="sex" values="female">女
    <input type="radio" name="sex" values="weizhi">未知

在这里插入图片描述
（2）复选框（checkbox）

    <input type="checkbox" name="hobby" value="play">玩
    <input type="checkbox" name="hobby" value="study">学习
    <input type="checkbox" name="hobby" value="ball">打球

在这里插入图片描述
（3）文件上传（file）

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

在这里插入图片描述
（4）下拉框（select）

下拉选项（option）

<select name="address" id="address">
    <optgroup label="地址">
        <option value="HN">湖南</option>
        <option value="HN">浙江</option>
        <option value="HN">山西</option>
    </optgroup>
</select>

optgroup 表示大的分组
在这里插入图片描述
（5）文本域

<textarea name="introduce" id="introduce" cols="30" rows="10">

</textarea>

在这里插入图片描述
（6）重置和提交（ reset 和 submit ）

 <input type="reset" value="重置">
    <input type="submit" value="提交">

在这里插入图片描述
（7）使光标点击文本时就可以落在框中（label）

<label for="user">用户名</label>
<input type="text" name="user" placeholder="请输入用户名" id="user">
<label for="mima">密码</label>
<input type="password" name="pwq" id="mima"><br>

label 中必须加上 for ，for 与 id 数据交互。
在这里插入图片描述
（8）只读（ readonly）

<input type="text" name="user" placeholder="请输入用户名" id="user" readonly>

（9）禁用（disabled）

<input type="text" name="user" placeholder="请输入用户名" id="user" disabled>

（10）大的分组

<fieldset>
    <legend>用户信息</legend>
    <label for="user">用户名</label>
    <input type="text" name="user" placeholder="请输入用户名" id="user" disabled>
    <label for="mima">密码</label>
    <input type="password" name="pwq" id="mima"><br>
</fieldset>

（11）提交方式（method）

提交方式有两种，一是 get ，但是不太安全，二是 post ，相对来说更安全一点

<form action="内联元素.html" method="post">
    get 相对不安全
    post 相对安全

（12）默认属性（selected）

<option value="HN" selected>浙江</option>

附（今日份学习）：
在这里插入图片描述

南风和云

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端 HTML ：如何创建网页 03

六.表单（form）1.输入（input）因为 name 属性是前后端数据交互的过程，用户输入不加name属性，后端就无法接收到数据<body><form action="https://www.baidu.com/s"> <input type="text" name="wd"> <input type="submit" value="提交"><!-- name属性：前后端数据交互的过程，用户输入不加name属性，后端就
复制链接

扫一扫