表单的基本元素
1.我们先来看看表格。几乎每个网站都会有。
2.表单给人最直接的印象就是有一些输入框和一些按钮。
3.这些输入框可以接受用户输入的数据，按钮可以提交用户数据。
4.表单元素由一组标签组成。
提交表单的方式有很多种，主要有两种:
1.get模式:这也是默认模式，用户提交的所有表单数据都在url地址上。
优点是容易反复采集调用，缺点是不安全，数据量有限。
2.post模式:通过请求头提交数据，url地址栏不可见，非常安全，长度不限。
Get模式非常适合传输不敏感的短数据。
Post模式非常适合传输长度不确定的重要数据。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3-1表单的基本元素</title> </head> <body> <form action="demo.php" method="get"> <!-- <form action="demo.php" method="post"> --> <!-- 最重要的输入控件标签是<input>,它有很多类型,是由type属性来指定的 --> <!-- 1.文本框: 最常见,可以输入文本,常用来输入用户名帐号等 --> <!-- 因为input是一个内联元素,多个input会在一行显示,所以后面加一个换行标签 --> <!-- name是输入控件的名称,一定要设置,因为PHP要用它当变量名来获取表单的数据 value保存的是用户输入的数据,通常保持为空即可 --> 姓名:<input type="text" name="name" value=""> <br> <!-- 2.密码框: type="password",和文本是一样的,只是用户输入的内容以星号代替 --> 密码:<input type="password" name="password" value=""> <br> <!-- 3.单选框:顾名思义就是每次只能选择一项,例如性别,付款方式等只能选择一个且选项较少的情况 --> <!-- 单选按钮的name值必须全部一样,才能确保仅返回一个选择 --> <!-- 可以设置默认选择荐:checked:它是布尔属性,不需要赋值,如果要给值就是它自己 --> 性别:<input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="woman">女 <input type="radio" name="sex" value="secret" checked>保密 <br> <!-- 4.复选框:就是一次可以选择多个数据提交,返回值是一个数组,name属性要加[],确保返回数组 --> 爱好:<input type="checkbox" name="hobby[]" value="movie">看电影 <input type="checkbox" name="hobby[]" value="game" checked>打游戏 <input type="checkbox" name="hobby[]" value="cook">做饭 <input type="checkbox" name="hobby[]" value="wash">洗衣服 <br> <!-- 5:下拉列表框:点击后会出一个下拉列表,用户可以选择一个或多个选项 --> <!-- 下拉列表使用的是select标签,名值对name和value分在二个标签中 --> <!-- name写在父标签select中,value写在option子标签中,可以用selected属性设置默认值 --> 级别: <select name="level"> <option value="0">纯洁的小白</option> <option value="1">有点污啦</option> <option value="2" selected>目空一切</option> <option value="3">宇宙无敌小霸王</option> </select> <br> <!-- 6.文件上传域:accept属性设置允许上传的文件类型,不过这个很少用,应该在服务器进行判断 --> 头像:<input type="file" name="photo" accept="image/*"> <br> <!-- 特殊的隐藏域:type="hidden",为什么要用隐藏域呢? 1.有一些数据是自动生成的,不需要用户输入:例如注册时间 2.有一些数据用户是不知道的,例如,用户id 3.后端通过表单向一些页面传数据时使用的主键或关键字 --> <!-- 在页面看不到隐藏域的东西,但是提交后可以在后台看到通过隐藏域传递过来的数据 --> <input type="hidden" name="user_id" value="10"> 文本域:<textarea name="comment" rows="5" cols="30"></textarea><br> <!-- 7.提交按钮:type="submit",type="button"是普通按钮,失去提交功能 --> <input type="submit" name="submit" value="提交"> <input type="button" name="button" value="提交"> <!-- type="reset"可以重置用户数据,恢复到最初状态 --> <input type="reset" name="reset" value="重置"> <!-- 8.提交图像按钮: type="image",默认就是提交功能,与submit功能是一样的 --> <input type="image" name="submit" src="../images/submit.jpg" width="30"> </form> </body> </html>这些是html表单基本元素的细节。请多关注AdminJS.cn的其他相关文章！
adminjs.cn是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 Adminjs.cn还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 在Adminjs.cn中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能！