【html+css】表单元素

news2024/11/27 6:36:24

表单元素

展示图

简约写法：

完美写法

表单元素

输入框单选框复选框下拉框按钮

展示图

简约写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>自我介绍</h3>
姓名: <input type >
<br><br>
性别:
<input type="radio" >男
<input type="radio" >女
<br><br>
所在地区:
    <select>
        <option>北京</option>
        <option>天津</option>
        <option>上海</option>
        <option>南京</option>
    </select>
<br><br>
简介:
<textarea></textarea>
<br><br>
<input type="submit" value="提交">
<br><br><br>
<input type="checkbox">
<label >同意xxxxxxxxxx</label>

</body>
</html>

提交按钮两种写法：

写法一： <input type="submit" value="提交">

写法二： <button>提交</button>

完美写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>自我介绍</h3>
<!-- 文本输入框 -->
<label for="name">用户名:</label>
<input type="text" id="name" name="name" required>
<br><br>
<!-- 单选按钮 -->
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>

<br><br>

<!-- 下拉列表 -->
<label for="city">所在城市:</label>
<select id="city" name="city">
    <option >北京</option>
    <option >天津</option>
    <option >上海</option>
    <option >重庆</option>
</select>
<br><br>

<!-- 提交按钮 -->
<button>提交</button>
<br><br>

<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">同意xxxxxxxxx</label>
</form>

</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1259710.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！