300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > web前端学习(四)——HTML 表单(1)- 用户注册表单举例

web前端学习(四)——HTML 表单(1)- 用户注册表单举例

时间:2022-08-31 22:49:34

相关推荐

web前端学习(四)——HTML 表单(1)- 用户注册表单举例

表单:就是类似于登录界面,用于接收用户的信息。(如下图的微博登录界面所示)

表单以<form>开始,以</form>结束。

1、表单有什么用?

收集用户信息。表单展现之后,用户填写表单,点击提交按钮提交数据给服务器。

2、怎么画一个表单?

使用form标签画表单。

3、一个网页当中可以有多个表单form。

4、表单最终是需要提交数据给服务器的,form标签有一个action属性,这个属性用来指定服务器地址:action属性和超链接中的href属性一样,都可以向服务器发送请求(request)

5、<form action="http://192.168.111.3:8080/oa/save"> </form> :

其中 http://192.168.111.3:8080/oa/save 是请求路径,表单提交数据最终提交给:192.168.111.3机器上的8080端口对应的软件。

按钮:

1、在网页中需要画一个提交按钮,用来提交表单。

2、画按钮可以使用input输入域,type="submit"的时候表示该按钮是一个提交按钮,具有提交表单的能力。 而button只是一个普通按钮,不具备提交表单的能力。(type后面不能随便写)

3、对于按钮来说,按钮的value属性用来指定按钮上显示的文本信息。如果没有value,显示的是提交。

(有value)

(没有value)

4、text能够显示文本框:<input type=“text”>

(百度按钮前面的文本框)

代码举例:<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><form action="http://192.168.111.3:8080/oa/save"><input type="submit" value="注册"/><input type="button" value="设置按钮上显示的文本"/></form><!--这个按钮和普通的超链接没有太大的区别。超链接和表单都可以向服务器发送请求,只不过表单发送请求的同时可以携带数据。--><form action=""><!--<input type="text">--><input type="submit" value="百度"> </form></body></html>

表单(form)和列表(table)相结合的运用:

1、表单是以什么格式提交给服务器的?(非常重要)

http://localhost:8080/jd/login?username=abc&userpwd=116

格式:cation?name=value&name=value&name=value&name=value.....

W3C的HTTP协议规定的,必须以这种格式提交给服务器

重点强调:表单项写了name属性的,一律会提交给服务器;不想提交这一项,就不要写name属性。

文本框和密码框的value不需要程序员指定,用户输入什么,value就是什么。

2、当name没有写的时候,该项不会提交给服务器。

但是当value没有写的时候,value的默认值是空字符串“”,会将空字符串提交给服务器。

Java代码得到的是:string username = " ";

<form action="http://localhost:8080/jd/login"><table><tr><td>用户名</td><td><input type="text" name="username"></td></tr><tr><td>密码</td><td><input type="password" name="userpwd"></td></tr><tr align="center"><td colspan="2"><input type="submit" value="登录" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="清空" ></td></tr></table></form>

运行结果:(实际操作中点击登录和清空都会使网页产生反应)

form表单method属性:

get:采用get方式提交的时候,用户提交的信息会显示在浏览器的地址栏上。

post:采用post方式提交的时候,用户提交的信息不会显示在浏览器的地址上。

当用户提交的信息中含有敏感信息,例如:密码,建议采用post方式提交。

method属性不指定,或者指定get,这种情况下都是get。

只有当method属性指定为post的时候才是post请求。

剩下的所有请求都是get请求(如:超链接)

用户注册表单代码举例:<!DOCTYPE html><html><head><meta charset="utf-8"><title>用户注册的表单</title></head><body><!--用户注册:用户名密码确认密码性别兴趣爱好学历简介--><form action="http://localhost:8080/jd/register" method="post">用户名 <input type="text" name="username"><br>密码 <input type="password" name="userpwd"><br>确认密码 <input type="password" ><br>性别 <input type="radio" name="sex" value="1"> 男<input type="radio" name="sex" value="0" checked> 女 <!--单选按钮的value必须手动指定--><br>兴趣爱好 <input type="checkbox" name="interest" value="smoke"> 抽烟<input type="checkbox" name="interest" value="drink" checked> 喝酒<input type="checkbox" name="interest" value="fire"> 烫头<br>学历<select name="grade" ><option value="gz">高中</option><option value="dz">大专</option><option value="bk" selected>本科</option><option value="ss">硕士</option></select><br>简介<!--文本域,文本域没有value属性,用户填写的内容就是value--><textarea rows="10" cols="60" name="introduce"></textarea><br><input type="submit" value="注册"><input type="reset" value="清空"></form></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。