HTML进阶- 4.2 表单元素

2024-04-19 用户投稿学习笔记 15阅读

文章目录表单元素1. input元素2. select元素3. textarea元素4. 按钮元素5. 表单状态6. 配合表单元素的其他元素6.1 label6.2 datalist6.3 form元素6.4 fieldset元素

表单元素

一系列元素，主要用于收集用户数据

1. input元素

input元素是一个输入框，它具有type属性（输入框的类型），value属性（输入框的值），placeholder属性（显示提示的文本）等

type属性：输入框类型 type: text，普通文本输入框 type：password，密码框 type: date, 日期选择框，兼容性问题 type: search, 搜索框，兼容性问题 type：range，滑块 type：color，颜色选择框 type: number，数字输入框 type: checkbox，多选框 type: radio，单选框 type: file，文件选择框当type值为reset、button、submit时，input表示按钮。value属性：输入框的值placeholder属性：显示提示的文本，文本框没有内容时显示 <body> <p>  <input type="text" placeholder="请输入账号"> </p> <p>  <input type="password" placeholder="请输入密码"> </p> <p>  <input type="date"> </p> <p>  <input type="search"> </p> <p>  <input type="range" min="0" max="5"> </p> <p>  <input type="color"> </p> <p>  <input type="number" min="0" max="100" step="20"> </p> <p>  爱好： <input name="loves" type="checkbox"> 音乐 <input checked name="loves" type="checkbox"> 电影 <input name="loves" type="checkbox"> 阅读 <input name="loves" type="checkbox"> 其他 </p> <p>  性别： <input name="gender" type="radio"> 男 <input checked name="gender" type="radio"> 女 </p> <p>  <input type="file"> </p> <p> <input type="submit" value="这是一个提交按钮"> </p></body>

2. select元素

select元素是下拉列表选择框，通常和option元素（表示下拉列表的选项）配合使用。

<body> <p> 请选择城市： <select> <option>成都</option> <option>北京</option>  <option selected>哈尔滨</option> </select> </p> <p> 请选择你最喜欢的人： <select> <optgroup label="歌手"> <option>胡夏</option> </optgroup> <optgroup label="游戏主播"> <option>潘北真香</option> <option>阿三解说</option> <option>猫萌</option> </optgroup> </select> </p> <p> 请选择你喜欢的人呢： <select multiple> <optgroup label="歌手"> <option>胡夏</option> </optgroup> <optgroup label="游戏主播"> <option>潘北真香</option> <option>阿三解说</option> <option>猫萌</option> </optgroup> </select> </p></body>

3. textarea元素

textarea元素是文本域，多行文本框，内容中的空白会显示

<body> <p> 请填写简介：   <textarea style="width:500px;height:300px;" placeholder="请输入简介"></textarea> </p></body>

4. 按钮元素

虽然input可以做按钮元素，但一般按钮用button元素（更灵活，可加其他元素，如p元素）。button中的type属性指定按钮的类型：reset、submit、button，默认值submit。

<body> <p> <button type="button">这是一个按钮</button> </p> <p> <input type="image" src="hashiqi.jpg"> <button> <img src="hashiqi.jpg" alt="" style="width:150px;"> <p>Lorem ipsum dolor sit.</p> </button> </p></body>

5. 表单状态

readonly属性：布尔属性，是否只读，不会改变表单显示样式

disabled属性：布尔属性，是否禁用，会改变表单显示样式

6. 配合表单元素的其他元素 6.1 label

label是普通元素，通常配合单选和多选框使用。

显示关联

可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素id的值。

<body>  <p> 请选择性别： <input id='radMale' name='gender' type="radio">  <label for="radMale">男</label> <input id='radFemale' name='gender' type="radio"> <label for="radFemale">女</label> </p></body> 隐式关联 <body> <p> 请选择性别： <label> <input name="gender" type="radio"> 男 </label> <label> <input name="gender" type="radio"> 女 </label> </p></body> 6.2 datalist

datalist是数据列表，该元素本身不会显示到页面，通常用于和普通文本框配合。

<body> <p> 请输入你常用的浏览器： <input list="userAgent" type="text"> </p> <datalist id="userAgent"> <option value="Chrome">谷歌浏览器</option> <option value="IE">IE浏览器</option> <option value="Opera">欧鹏浏览器</option> <option value="Safari">苹果浏览器</option> <option value="Fire fox">火狐浏览器</option> </datalist></body> 6.3 form元素

通常，会将整个表单元素，放置form元素的内部，作用是当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器。form元素对开发静态页面没有什么意义。

form元素中action属性指明将内容提交给谁进行验证。method属性表示提交方式GET或POST。不写name属性，无法将内容传到服务器。 <body> <form action="https://www.baidu.com/" method="GET"> <p> 账号： <input type="text" name="loginid"> </p> <p> 密码： <input type="password" name="loginpwd"> </p> <p> 城市： <select name="city"> <option value="1">成都</option> <option value="2">重庆</option> <option value="3">北京</option> <option value="4">哈尔滨</option> </select> </p> <p> <button type="submit">提交</button> </p> </form></body>

6.4 fieldset元素

fieldset元素可以将表单元素进行分组。

<body> <div> <h1>修改用户信息</h1> <fieldset>  <legend>账号信息</legend> <p> 用户账号： <input type="text" value="20220215" readonly> </p> <p> 用户密码： <input type="password"> </p> </fieldset> <fieldset> <legend>基本信息</legend> <p> 用户姓名： <input disabled value="夏小水" type="text"> </p> <p> 城市： <select disabled name="" id=""> <option value="">上海</option> <option value="">北京</option> <option value="">广州</option> <option value="">深圳</option> <option value="">武汉</option> <option value="">成都</option> <option value="">云南</option> <option value="">西安</option> <option value="">西藏</option> <option value="">漠河</option> </select> </p> </fieldset> <p> <button disabled>提交修改</button> </p> </div></body>

标签：