html表单提交和input标签了解
<form action="表单提交的位置(一个url)" method="post或get"><p><input type="???" name="通过name找到此组件,养成每个组件起名字的好习惯" value="默认值、初始值"/></p></form>
注:但凡input标签,都要定义name值
post和get的区别:
get:可以在访问时看网页上方的url找到我们提的信息,不安全,高 post: 比较安全,传输大文件
??? : input标签有很多类型
text :文本框(默认),其它属性比如:maxlenth(可输入字符串的最大长度)、size(文本框的长度)password: 密码,与文本框不同在于,在此类input中输入数据时,无法直接看到数据radio : 单选框,type、name、value是其必定义属性(同名才可多选一)checkbox : 多选框submit : 提交,点击,将表单内容提交到action属性对应的url处reset :重置,清空表单button : 普通按钮image :与submit等效,但用image代替了文字,使按钮外表不同select & option :下拉框,value属性表示控件代表的值textarea : 文本域,可设置cols和rows属性设置其列数和行数file :文件域,用来上传文件url :相当于一个网址number :数字,可设置其max、min和step设置其最大值、最小值和每次调整数字的变化email :邮箱,有简单的表单验证,但只要输入内容带有@或者为空,即可通过验证,不严谨range :滑块,同样拥有max、min、step属性,可用作音量调整控件search : 搜索框
学习时抄的代码:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>登录注册</title></head><body><h1>注册</h1><!--表单formaction : 表单提交的位置,可以是网站,也可以是一个请求处理地址method : post 和 get 两种不同的表单提交方式get方式提交可以在url中看到我们提交的信息,不安全,高效post方式比较安全,可以传输大文件--><form action="1.我的第一个网页.html" method="get"><!--文本输入框: input type="text" 设置name用于找到此表value为初始值,maxlength为可输入字符最大长度,size为输入框外表长度--><p>名字: <input type="text" name="username" value="我很勇敢" maxlength="6" size="30"></p><!--密码框: input type="password"--><p>密码: <input type="password" name="pwd"></p><!--单选框:radio:type value:初始值 name:名字标识--><!--注:一定要设置name,作为标价,否则两个radio不算一组,无法实现单选框--><p>性别:<input type="radio" value="boy" name="sex">男<input type="radio" value = "girl" name="sex">女</p><!--多选框--><p>爱好:<input type="checkbox" value="sleep" name="hobby">睡觉<input type="checkbox" value="code" name="hobby">敲代码<input type="checkbox" value="chat" name="hobby">聊天<input type="checkbox" value="game" name="hobby">游戏</p><!--按钮--><p>按钮:<!--普通按钮--><input type="button" name="btn1" value="按钮"><!--与submit等效,按钮表现为自定义image--><input type="image" src="resources/image/1.png"></p><!--提交和重置--><!--下拉框--><p>国家:<select name="列表名称"><option value="1">中国</option><option value="2">美国</option><option value="3" selected>瑞士</option><option value="4">印度</option></select></p><!--文本域行:rows列:cols--><p>反馈:<textarea name="textArea" cols="10" rows="3">文本内容</textarea></p><!--文件域--><input type="file" name="files"><input type="button" value="上传" name="upload"><!--邮箱验证--><p>邮箱:<input type="email" name="email"></p><!--URL--><p>url:<input type="url" name="url"></p><!--数字--><p>数字:<input type="number" name="number" max="10" min="0" step="10"></p><!--滑块,读音量可能用到--><p>滑块:<input type="range" name="voiceRange" max="100" min="0" step="2"></p><!--搜索框--><p>搜索:<input type="search" name="search"></p><p><input type="submit"><input type="reset"></p></form></body></html>