HTML学习（三）表单

最新推荐文章于 2023-07-14 19:00:42 发布

咸鱼hao

最新推荐文章于 2023-07-14 19:00:42 发布

阅读量173

点赞数

分类专栏： Web 文章标签： HTML Web

本文链接：https://blog.csdn.net/weixin_43868436/article/details/89685092

版权

Web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML学习（三）表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html表单</title>
</head>
<body>

<!-- 下拉选择框-->
<p>下拉选择框，单选</p>
<label>
    <select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat" selected>Fiat</option>
        <option value="audi">Audi</option>
    </select>
</label>
<br>

<!-- 多行输入文本域-->
<p>多行输入文本域</p>
<label>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</label>
<br>

<!-- 按钮-->
<p>按钮</p>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>

<!-- input-->
<p>以下是输入框</p>
<form action="html基础.html">
    User name:<br>
    <label>
        <input type="text" name="username" value="于浩" maxlength="4">
    </label>
    <br>
    User password:<br>
    <label>
        <input type="password" name="psw" disabled>
    </label>
    <br>
    <label>
        <input type="submit" value="submit">
    </label>
    <br>
    <p>单选按钮</p>
    <label>
        <input type="radio" name="sex" value="male" checked>
    </label>Male
    <br>
    <label>
        <input type="radio" name="sex" value="female">
    </label>Female
    <br>
    <p>复选按钮</p>
    <label>
        <input type="checkbox" name="vehicle" value="Bike">
    </label>I have a bike
    <br>
    <label>
        <input type="checkbox" name="vehicle" value="Car">
    </label>I have a car
    <p>事件按钮</p>
    <label>
        <input type="button" onclick="alert('Hello World!')" value="Click Me!">
    </label>
</form>
<br>
<h5>h5新增输入类型</h5>
<form>
    <p>有输入范围的数字</p>
    <label>
        <input type="number" name="quantity" min="1" max="5">
        <input type="submit" value="submit"><br>
        <input type="text" name="readonly " value="只可读" readonly><br>
        <input type="text" name="required" value="必须填写" required><br>
        <input type="number" name="points" min="0" max="100" step="10" value="30"><br>
        <input type="text" value="size" size="4">
    </label>
</form>
<p>日期 颜色 range 时间</p>
<form>
    <label>
        只有年月日
        <input type="date" name="bday" max="1979-12-31" min="2000-01-02"><br>
        选择颜色
        <input type="color" name="favcolor"><br>
        滚动条选择
        <input type="range" name="points" min="0" max="10" step="2" value="4"><br>
        只有时间
        <input type="time" name="usr_time"><br>
        年月日和时间
        <input type="datetime-local" name="bdaytime"><br>
        email
        <input type="email" name="email"><br>
        搜索
        <input type="search" name="search"><br>
        电话
        <input type="tel" name="telephone"><br>
        网址url
        <input type="url" name="url"><br>
        <input type ="text" name="placeholder" placeholder="placeholder"><br>
    </label>
</form>
</body>
</html>

咸鱼hao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习（三）表单

HTML学习（三）表单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>html表单</title></head><body><p>下拉...
复制链接

扫一扫