【HTML、-HX学习】网页前端学习笔记（二）

原创已于 2022-02-09 16:43:15 修改 · 580 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html

于 2022-02-05 20:44:25 首次发布

HTML学习专栏收录该内容

7 篇文章

订阅专栏

本文主要介绍了HTML中的表单元素，包括form标签的作用、属性，如action、id、name、target、method等；input元素的各种类型如text、password、radio、checkbox等及其属性；此外还讲解了lable标签、button按钮、select下拉列表的使用方法，以及常用字符实体。通过对这些基础知识的学习，读者可以更好地掌握网页前端表单设计。

继续学习，上链接，p4-p7

表单标签

1.form ---标签用于为用户输入创建HTML表单。

表单标签

1.form ---标签用于为用户输入创建HTML表单。

表单能够包含input元素，比如文字段、复选框、单选框、提交按钮等等。还可以包含textarea等元素。

表单用于向服务器传输数据。form元素是块级元素，其前后会产生折行。

前后台交互的方式

action ---表单提交的地址

id ---唯一标识

name ---名称

target ---表单提交打开方式（当前窗口）

method ---提交方式：get、post

-----get：默认，主动的获取方式，数据放在url上，用问号拼接，数据的容量有限，有缓存（是post速度的两倍）

-----post：数据不会跟在url上，放在请求实体中，数据量理论上没有限制相对安全，没有缓存

表单元素需要设置name属性值，否则数据无法传递！

input元素

type---表单元素的类型

----text：文本框

----password：密码框

----radio：单选框（需要设置一组相同的name属性值）

-----checkbox：复选框（需要设置一组相同的name属性值）

----button：普通按钮

----hidden：隐藏域（用于存放需要传递给服务器，但不需要显示的数据）

----file：文件域（上传文件）

----date：日期框

----submit：提交按钮

----reset：重置按钮

----image：图片按钮（提交按钮）

value：表单元素的值

checked：是否选中（单选框/复选框）

disabled：是否禁用

maxlength：允许输入的最大字符

编号:<input type="hidden" name="userId" valuem="1" /> <br>
姓名:<input type="text" value="zhangsan"name="userName" / ><br>
密码:<input type="password" name="userPwd" maxlength="6" /><br>
性别:男<input type="radio" naMe="userSex" value="man" checked="checked" />
女<input type="radio" name="userSex" value="woman" /> <br>
爱好:唱歌<input type="checkbox" name="userHobby" value="sing"/>
跳舞<input type="checkbox" name="userHobby" value="dance" checked />
说唱<input type="checkbox"name="userHobby" value="rap" disabled="disabled"/><br>
生日:<input type="date" name="userDate" /><br>
头像:<input type="file" name="iuserHead" /><br>
<input type="button" value="普通按钮"/>
<input type="reset" value="重置按钮"/>
<input type="submit" value="提交按钮"/>
<input type="image" scr="" />

textarea文本域简介：<textarea name="remark" rows="5" cols="20">11111</textarea>

lable标签：

设置label标签的for属性值与表单元素的id属性值对应，当点击label标签时，会自动给给表单元素聚焦

buttom按钮：

默认提交按钮

type=button普通按钮，submit提交，reset重置

select下拉列表：

        <select name="color">
			<option value="red">red</option>
			<option value="blue">blue</option>
			<option value="green">green</option>
        </select>

有value提交value，没有则提交文本

常用属性

value-----设置值

selected-设置选中状态