html登陆页面

HTML登录注册界面怎么制作?

在没有学习CSS样式的前提下,是如何做一个简单的注册界面的。

一、表单标签(form)

首先我们先写一个<form></form>的标签,form标签属于表单标签,通常我们的登录注册界面都是有提交数据的,是和服务器交互用的,用户在提交信息后,给服务器,服务器再根据提交的信息保存,这个时候就需要form标签了。

form标签里面常见属性有两种:

action:这个是表单提交给某服务器的地址。

method:用什么方式提交。通常我们常见的是:get(得到、成为)和post这两种,区别就是用户在写信息时显示的是明文还是暗文。

    Get:提交有长度限制,并且编码后的内容地址栏可见。(不安全,少用)

<form action="指向交给谁,网页地址" method="get"数据提交方式" />
//传递的值是有长度限制的。浏览器的地址栏里面可以看到。特殊时用。

 

    Post:提交无长度限制,并且编码后内容不可见。

<form action="指向交给谁,网页地址" method="post"数据提交方式" />
//传递的值没有长度限制,浏览器的地址栏里面不可以看到。常用。

 

        <form action="http://www.baidu.com" method="get">
            
                
        </form>


 

 

二、文本输入

文本输入有几种公式:

复制代码

//① 文本框公式
<input tyfe="text做文本框的" name="用户名" value="值"/>
//②密码框公式
<input tyfe="password" name="名字" value="值"/>
//密码框可以让用户输入的密码显示为黑点。
//③隐藏域公式
<input tyfe="hidden" name="名字" value="值"/>
//这个提交表单是可以提交的,但是用户是看不到的。
//④文本域公式(多行文本)
<textarea name="名字" cols="字符多少" rows="几行高"</textarse>
//非常大的区域,用户可以在里面写文章。

复制代码

1、用户注册

先做一个用户注册界面,我们用文本框的方式进行编写:

复制代码

<form action="http://www.baidu.com" method="get">
            
            <table>
                
                <tr>        
                    
                    <td>用户名:</td>
                    <td>
                        <!--<input type="text" name="userid" value="" placeholder="登录名"/>-->
                        <input type="text" name="user" value=""/>
                    </td>
                        
                </tr>
    
                
            </table>
                
        </form>

复制代码

因为只写了一条,整个表单的框还是看不出来的。

2、密码框

复制代码

                  <tr>
                    <td>密码:</td>
                    <td>
                        <input type="password" name="pw" value="" />
                    
                    </td>
                

复制代码

 

 

3、确认密码

和密码框是一样的。属于常用步骤。

 


 

 

三、选择框

1、单选框(性别选项)

复制代码

                <tr>
                
                    <td>性别:</td>
                    <td>
                        <input type="radio" name="sex"  id="man1" value="1" />
                        <label for="man1">男</label>
                        <input type="radio" name="sex" id="man2" value="0" />
                        <label for="man2">女</label>
                                            
                    </td>                
                </tr>
                

复制代码

 

 

 

2、复选框

做一个类似于爱好类型的:

复制代码

                <tr>
                    <td>爱好:</td>
                    <td>
                    
                        <input id="a1" type="checkbox" name="love" value="a" />
                        <label for="a1">抽烟</label>
                        
                        <input id="b1" type="checkbox" name="love2" value="b" />
                        <label for="b1">喝酒</label>
                        
                        <input id="c1" type="checkbox"  name="love3" checked="checked" value="c"/>
                        <label for="c1">美女</label>

                    </td>

复制代码

 

 


 

 

四、下拉列表框

下拉列表标签:<select></select>

<selet name="名字" size="等于1时为列表" multiple="multiple"多选的意思/>

 民族为列:

复制代码

                <tr>
                
                    <td>民族:</td>
                    <td>
                        <select name="nation">
                            <option value="1" selected>汉族</option>
                            <option value="2">满族</option>
                            <option value="3">苗族</option>
                            <option value="4">回族</option>
                            <option value="5">彝族</option>
                            <option value="6">傣族</option>
                         </select>

                    </td>

                </tr>

复制代码

 

六、按钮

复制代码

//1、普通按钮

<input type="button" name="按钮名字" value="值"/>

//如果想让用户读不到,那么可以添加一下:

<input type="button" name="按钮名字" disabled="disabled" value="值"/>

//2、提示按钮

<input type="submit" name="按钮名字" valer="值"/>

//如果想让用户读不到,那么可以添加一下:

<input type="submit" name="按钮名字" disabled="disabled" value="值"/>

//3、重置按钮

<input type="reset" name="按钮名字" valer="值"/>


//如果想让用户读不到,那么可以添加一下:

<input type="reset" name="按钮名字" disabled="disabled" value="值"/>

//4、图片按钮

<input type="image" name="按钮名字" src="图片地址"/>

//如果想让用户读不到,那么可以添加一下:

<input type="image" name="按钮名字" disabled="disabled" src="图片地址">

复制代码

 

注册按钮例:

复制代码

               <tr>
                    <td colspan="2">
                        <input type="submit" value="注册" />
                        <input type="reset" value="重置" />
                        <input type="image" src="HTML/1.gif" />

                    </td>
               </tr>

复制代码

 

这世界只有懒人。没有庸人!

### 回答1: 下面是一个HTML下拉复选框的例子: ```html <select multiple> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> <option value="option4">选项4</option> <option value="option5">选项5</option> </select> ``` 这段代码创建了一个下拉复选框。使用`<select>`标签来定义下拉复选框,添加`multiple`属性可以让用户选择多个选项。在`<select>`标签中添加`<option>`标签来定义选项。每个`<option>`标签都有一个`value`属性来指定选项的值,以便后台处理。在`<option>`标签中添加文本作为选项的显示内容。 用户可以按住Ctrl键或Shift键并单击来选择多个选项。选择的选项会被以相应的值发送到服务器端进行处理。 如果要对选项进行预先选择,可以在`<option>`标签中添加`selected`属性,例如:`<option value="option1" selected>选项1</option>`。 这只是一个简单的例子,实际应用中可根据需求进行更复杂的设计和功能扩展,例如添加样式、绑定事件等。可以通过CSS样式来美化下拉复选框,也可以使用JavaScript重新设计其功能和行为。 ### 回答2: HTML下拉复选框是一种表单元素,它允许用户在给定的选项中进行多选。下面是一个示例的HTML代码,用于创建一个下拉复选框: <select multiple> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> 在这个代码中,`<select>`元素用于创建下拉复选框。`multiple`属性被添加到`<select>`元素中,以允许用户选择多个选项。每个选项由`<option>`元素定义,其中`value`属性指定选项的值,用于提交表单数据。在`<option>`元素内部,可以添加文本内容,用于显示给用户。 用户可以通过按住Ctrl键(在Windows系统中)或Command键(在Mac系统中)来选择多个选项。所选选项将以选中的状态呈现给用户。通过表单提交,我们可以获取到用户所选择的所有选项的值。 需要注意的是,这只是一个基本的示例,你可以根据自己的需求自定义选项内容和显示样式。为了增加用户体验,可以使用CSS样式对下拉复选框进行美化。可以使用JavaScript来增加一些行为,例如根据用户的选择显示或隐藏其他元素。 总而言之,HTML下拉复选框是一种很实用的表单元素,可以满足用户在给定选项中选择多个选项的需求。 ### 回答3: HTML下拉复选框是一种常用的用户界面元素,它允许用户从下拉列表中选择一个或多个选项。下面是一个简单的HTML下拉复选框的代码示例: ```html <select multiple> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> <option value="option4">选项4</option> </select> ``` 在上面的代码中,`<select>`标签表示下拉复选框,`multiple`属性表示允许选择多个选项。每个选项都使用`<option>`标签来定义,在`value`属性中指定选项的值,显示在选项旁边的文本在`<option>`标签的起始和结束标签之间。 使用这个HTML下拉复选框代码,用户可以单击并选择一个或多个选项,按住Ctrl键(Windows)或Command键(Mac)选择多个选项。可以通过设置`selected`属性来预先选择一些选项,只需在对应的`<option>`标签上设置`selected`属性即可。 带有下拉复选框的HTML表单可以用于收集多个选项的用户选择,例如用户可以选择多个兴趣爱好、多个商品等。收集到的用户选择数据可以通过后端编程语言来处理和存储。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值