web前端开发第二节课

最新推荐文章于 2023-07-16 15:10:35 发布

开心鱼爱学习

最新推荐文章于 2023-07-16 15:10:35 发布

阅读量623

点赞数

文章标签： servlet java 开发语言前端

本文链接：https://blog.csdn.net/m0_55920635/article/details/126796379

版权

本文详细介绍了如何使用HTML、CSS和JavaScript创建一个完整的注册表单，包括文本输入、密码输入、性别选择、学历下拉、文件上传、多选和大文本框，以及提交按钮。通过实例演示了前端开发的基础元素。

摘要由CSDN通过智能技术生成

表格标题行，字体加粗倾斜下划线

字体加粗：

<caption style="font-size: 25px;"><b>创建表格</b></caption>

字体倾斜：

<caption><i>创建表格</i></caption>

字体加下划线：

<caption><u>创建表格</u></caption>

form表单

1.placeholder提示语句，name传个后端相应的名称，此处为username。

<form >
        姓名：<input type="text" name="username" placeholder="请输入姓名"/>
</form>

2.密码段

 密码：<input type="password" name="password"  placeholder="请输入密码">

3.性别

加入<label></label>标签，即可点文字选择选项。当value值为0时性别为男，value值为1时性别为女，name的sex名称必须一致。

 性别：<label><input type="radio" name="sex" value="0"/>男</label>
        <label ><input type="radio" name="sex" value="1"/>女</label>

3.学历下拉框

下拉框用<select></select>。<option></option>为下拉选项。当selected=selected为默认选项，此处默认选项为本科生。

<option >专科生</option>此出专科生只是展示给我们的部分，加入value传给后端，即为下方语句。

学历：<select name="graduation">
            <option value="0">专科生</option>
            <option selected="selected" value="1">本科生</option>
            <option value="2">研究生</option>
            <option value="3">博士生</option>
        </select><br><br>

4.照片

 照片：<input type="file" name="phone"/><br><br>

5.多选功能

 兴趣爱好：<label><input type="checkbox" name="hobby" value="0"/>游泳</label>
        <label><input type="checkbox" name="hobby" value="1"/>篮球</label>
        <label><input type="checkbox" name="hobby" value="2"/>绘画</label>
        <label><input type="checkbox" name="hobby" value="3"/>学习</label> <br><br>

6.大文本编辑框

 简历：<textarea name="resume" rows="4" cols="25"></textarea><br><br>

7.提交按钮

与form表格搭配使用，method=“post”，提交给后端。

get 放在网页连接上，post放在消息体里，用post更好

<form action="register.do" method="post"> 
<input type="submit"/><hr>
</form>

8.HTML字符实体

有些符号已经预留，不能在使用，在HTML里不能使用小于号<,大于号>,所以需要转义字符，可在菜鸟教程查找。列如。

&reg;&copy;

整体效果

全部代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form 表单</title>
</head>
<body>
    <form action="register.do" method="post">
        姓名：<input type="text" name="username" placeholder="请输入姓名"/><br><br>
        密码：<input type="password" name="password"  placeholder="请输入密码"><br><br>
        性别：<label><input type="radio" name="sex" value="0"/>男</label>
        <label ><input type="radio" name="sex" value="1"/>女</label><br><br>
        学历：<select name="graduation">
            <option value="0">专科生</option>
            <option selected="selected" value="1">本科生</option>
            <option value="2">研究生</option>
            <option value="3">博士生</option>
        </select><br><br>
        照片：<input type="file" name="phone"/><br><br>
        兴趣爱好：<label><input type="checkbox" name="hobby" value="0"/>游泳</label>
        <label><input type="checkbox" name="hobby" value="1"/>篮球</label>
        <label><input type="checkbox" name="hobby" value="2"/>绘画</label>
        <label><input type="checkbox" name="hobby" value="3"/>学习</label> <br><br>
        简历：<textarea name="resume" rows="4" cols="25"></textarea><br><br>
        <input type="submit"/><hr>
      
    </form>
   
    <p>&reg;&copy;</p>
</body>
</html>