導航:首頁 > 萬維百科 > 網頁設計表單查找輸入文本框

網頁設計表單查找輸入文本框

發布時間:2021-01-02 02:21:22

1、怎樣在網頁製作中插入文本框

表單中使用最多的對象就是文本框,比如在注冊用戶的表單中,注冊用戶名,姓名,密碼,電子郵箱和自我簡介等,這些都需要用到文本框.
文本框能夠保存任何數量的字母字元,可以設定文本框的類型是單行,多行和密碼.
插入步驟:
在插入文本框等表單對象之前,通常應該先插入表單,接著按滑鼠指針定位於表單內,然後再在這個表單中插入文本框,如果之前沒有插入表單就直接插入文本框等表單對象,默認情況下會彈出提示框,要求你添加表單.
此時只需要填寫好參數就會自動給你生成一個表單.

2、網頁表單的製作詳細點

HTML表單(Form)是HTML的一個重要部分,主要用於採集和提交用戶輸入的信息。

舉個簡單的例子,一個讓用戶輸入姓名的HTML表單(Form)。示例代碼如下:

<form action="http://www.blabla.cn/asdocs/html_tutorials/yourname.asp" method="get">

請輸入你的姓名:

<input type="text" name="yourname">

<input type="submit" value="提交">

</form>

學習HTML表單(Form)最關鍵要掌握的有三個要點:

表單控制項(Form Controls)
Action
Method
先說表單控制項(Form Controls),通過HTML表單的各種控制項,用戶可以輸入文字信息,或者從選項中選擇,以及做提交的操作。比如上面的例句里,input type= "text"就是一個表單控制項,表示一個單行輸入框。

用戶填入表單的信息總是需要程序來進行處理,表單里的action就指明了處理表單信息的文件。比如上面例句里的http://www.blabla.cn/asdocs/html_tutorials/yourname.asp。

至於method,表示了發送表單信息的方式。method有兩個值:get和post。get的方式是將表單控制項的name/value信息經過編碼之後,通過URL發送(你可以在地址欄里看到)。而post則將表單的內容通過http發送,你在地址欄看不到表單的提交信息。那什麼時候用get,什麼時候用post呢?一般是這樣來判斷的,如果只是為取得和顯示數據,用get;一旦涉及數據的保存和更新,那麼建議用post。

HTML表單(Form)常用控制項(Controls)
HTML表單(Form)常用控制項有:

input type="text" 單行文本輸入框
input type="submit" 將表單(Form)里的信息提交給表單里action所指向的文件
input type="checkbox" 復選框
input type="radio" 單選框
select 下拉框
textArea 多行文本輸入框
input type="password" 密碼輸入框(輸入的文字用*表示)
表單控制項(Form Control):單行文本輸入框(input type="text")
單行文本輸入框允許用戶輸入一些簡短的單行信息,比如用戶姓名。例句如下:

<input type="text" name="yourname">

演示示例 演示示例 里的信息提交給表單里action所指向的文件。

表單控制項(Form Control):復選框(input type="checkbox")
復選框允許用戶在一組選項里,選擇多個。示例代碼:

<input type="checkbox" name="fruit" value ="apple">蘋果<br>

<input type="checkbox" name="fruit" value ="orange">桔子<br>

<input type="checkbox" name="fruit" value ="mango">芒果<br>

用checked表示預設已選的選項。

用checked表示預設已選的選項。

<input type="checkbox" name="fruit" value ="orange" checked>桔子<br>

表單控制項(Form Control):單選框(input type="radio")
使用單選框,讓用戶在一組選項里只能選擇一個。示例代碼:

<input type="radio" name="fruit" value = "Apple">蘋果<br>

<input type="radio" name="fruit" value = "Orange">桔子<br>

<input type="radio" name="fruit" value = "Mango">芒果<br>

比如密碼。因為用戶輸入的時候?

用checked表示預設已選的選項。

<input type="radio" name="fruit" value = "Orange" checked>桔子<br>

表單控制項(Form Control):下拉框(select)
下拉框(Select)既可以用做單選,也可以用做復選。單選例句如下:

<select name="fruit" >

<option value="apple">蘋果

<option value="orange">桔子

<option value="mango">芒果

</select>

如果要變成復選,加muiltiple即可。用戶用Ctrl來實現多選。例句:

<select name="fruit" multiple>

用戶還可以用size屬性來改變下拉框(Select)的大小。

表單控制項(Form Control):多行輸入框(textarea)
多行輸入框(textarea)主要用於輸入較長的文本信息。例句如下:

<textarea name="yoursuggest" cols ="50" rows = "3"></textarea>

其中cols表示textarea的寬度,rows表示textarea的高度。

表單控制項(Form Control):密碼輸入框(input type="password")
密碼輸入框(input type="password")主要用於一些保密信息的輸入,比如密碼。因為用戶輸入的時候,顯示的不是輸入的內容,而是黑點符號。。例句如下:

<input type="password" name="yourpw">

表單控制項(Form Control):提交(input type="submit")
通過提交(input type=submit)可以將表單(Form)里的信息提交給表單里action所指向的文件。例句如下:

<input type="submit" value="提交">

表單控制項(Form Control):圖片提交(input type="image")
ASP 網頁獲取。

input type=image 相當於 input type=submit,不同的是,input type=image 以一個圖片作為表單的提交按鈕,其中 src 屬性表示圖片的路徑。

<input type="image" src ="http://www.blabla.cn/images/icons/go.gif"

alt = "提交" NAME="imgsubmit">

3、跪求網頁製作大神 請問一個表單有文本框 下拉列表 和文本域的編程模板是什麼 求模板

<form action="#">
<input name="type" id="type" value="1" />
<select name="11" id="11" >
<option value="1">18-21</option>
<option value="2">22-25</option>
<option value="3">26-29</option>
<option value="4">30-35</option>
<option value="5">Over35</option>
</select>
<textarea rows="10" cols="30"></textarea>
</form>

4、網頁製作如何設置表單中文本域的寬度

size="100" 數字越大就越寬。。
也可以用css控制。。設置她的寬度。。

5、跪求網頁製作大神 請問一個表單有文本框 下拉列表 和文本域的模板是什麼

<form method="POST" action="--WEBBOT-SELF--">

 <input type="text" name="T1" size="20" value="這個是文本框"><br>

 <select size="1" name="D1">

 <option>這個是下拉列表</option>

 </select><br>

 <textarea rows="2" name="S1" cols="20">這個是文本域</textarea><br>

 <input type="submit" value="提交" name="B1">

</form>

 

以上就是你說的表單代內碼

 

下邊是代碼運行效容果: 網頁里只要含有這些,就符合你說的模板了

6、關於網頁製作表單》文本框的問題!

<input type="text" name="click" value="點擊就選中" onClick="this.focus()" onFocus="this.select()">

7、運用HTML5表單元素製作一個簡單的網頁,內容包括:用戶名輸入、密碼輸入、二次密碼確認、郵箱輸入、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
用戶:<input id="uname" type="text" /><br />
密碼:<input id="pwd" type="password"  /><br>
確認密碼:<input id="pwd1" type="password"  /><br>
EMAIL:<input id="email" name="email" type="email" /><br>
<input id="load" value="登陸" type="button" onclick="check()" />
<script language="javascript">

window.onload = function ()
{
document.getElementById('uname').focus();

}
function check()
{
var uname=document.getElementById("uname").value;
var pwd=document.getElementById("pwd").value;
var pwd1=document.getElementById("pwd1").value;
var email=document.getElementById("email").value;
if(uname+pwd=="")
{
 alert("用戶名和密碼不能為空");
}
else if(uname=="")
{
  alert("用戶名不能為空");
}
else if(pwd=="")
{
  alert("密碼不能為空");
}
else if(pwd1 != pwd)
{
  alert("兩次密碼不一樣");
}
//
if(email=="")
{
    alert("電子郵件不能為空");
    return false;
}
else
{
    reg=/^([a-zA-Z0-9]+[_|-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|-|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/gi;
    if(!reg.test(email))
    {
        alert("非法的電子郵件");
        return false;
    }
}
}
</script>
</body>
</html>

8、急!!!!!!網頁設計中表單中的文本框怎麼調整文本框的長度呢?

<input type="text" name="inputName" size="長度"/>

<input type="text" name="inputName" style="width:長度px">

9、要求:設計一個網頁,網頁中表單有一個文本框和按鈕,在點擊按鈕提交時,利用JavaScript獲取文本框

表單呢,我就沒全部寫出來了,我幫text文本框和button按鈕幫你做出來了,效果也做出來了,你自己看看,有什麼不懂的可以問我

<body>
<input type="text" value="" placeholder="請輸入郵箱" id="yx">
<br/>
<br/>
<button type="button" id="bt">提交</button>

<script>
var yx=document.getElementById("yx");
var bt=document.getElementById("bt");

bt.onclick=function(){
var reg=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/gi;
var str=yx.value;
var rel=reg.test(str);
if(rel){
alert("填寫正確");
}
else{
alert("填寫錯誤,請檢查");
}
}
</script>
</body>

10、用DW製作網頁時怎樣在頁面中加入搜索欄

1、新建一個asp頁面,保存為「sousuojieguo.asp」。

2、打開之前製作過的"jiluji.asp「。

3、把滑鼠指針放在表格的最左邊,按回車鍵,把滑鼠指針往上移,然後點擊菜單欄的:插入-->表單-->表單,插入一個表單。

4、在表單里邊輸入」搜索:「,然後點擊菜單欄:插入-->表單-->文本域,插入一個文本框。

5、滑鼠點擊剛剛插入的文本框,然後在下方把id改成"sousuo"。

6、然後把滑鼠放到文本框的後邊,插入一個按鈕,並把按鈕上的顯示文字改成"搜索「,切換到剛剛新建的」sousuojiesuo.asp「頁面,打開」綁定「面板,點擊」+「,選擇」記錄集(查詢)「。

7、在彈出的界面如圖所示設置:篩選設置成:xingming-包含-表單變數-sousuo。

8、把滑鼠放到搜索結果頁面上輸入「搜索結果:「,然後回車,在點擊菜單欄:插入-->表格。插入一個2行4列的表格。

9、 然後在表格第一行一次輸入如圖所示文字。

10、然後把綁定面板中剛剛新建的記錄集依次拖入表格第二行對應的位置。 


11、把滑鼠指針放到第二行的任意位置,然後點擊界面下方的<tr>標簽,選中第二行。

12、打開」伺服器行為「面板,點擊」+「,選擇」重復區域「。

13、在彈出的界面中選擇」所有記錄「,然後點擊」確定「。

14、切換到」jiluji.asp",把滑鼠指針放到搜索框所在表單中,點擊界面下方的<form#form1>,選中整個表單。

15、在屬性面板中點擊動作方框右邊的「文件夾」按鈕,在彈出的界面中選擇」sousuojieguo.asp「。選擇完成後,下方的方法選擇"post"。

16、保存所有文件,然後按F12就可以在瀏覽器中瀏覽效果了。

與網頁設計表單查找輸入文本框相關的知識