網頁設計表單例子_網頁設計一個最簡單的表單提交！

1、網頁製作中的表單應該如何設計

1、盡量讓表單一目瞭然
用戶瀏覽網站的時候，通常會快速掃視來獲取信息，看看網站內容和設計是否對他們的胃口或者符合需求，再決定要如何應對、交互。表單也是一樣的道理。一目瞭然的表單能讓用戶立刻知道他們需要填寫多少信息，以及如何提交表單。
更多平面設計知識，請咨詢華南平面設計學校。
2、考慮使用浮動的提示文本
對於是否要在表單的輸入框中加入提示文本有很多爭論，其中主要的爭論圍繞在一點上：當用戶點擊輸入框，游標出現准備輸入的時候，其中的提示文本並沒有自動消失，而需要手動刪除之後再才能輸入。這就非常尷尬了。
3、使用表單格式掩碼
格式掩碼能夠提醒用戶輸入的內容的格式，欄位的長短大小，對於表單的可用性有明顯提升。在用戶激活輸入框的時候，格式掩碼會出現，它會幫助用戶格式化輸入信息，避免提交的時候出錯。格式掩碼常見於數字輸入的時候。
4、把表單設計得易於輸入
你無法確知用戶使用的是手機還是電腦在瀏覽你的網頁，輸入你的表單，但是它應該對於各種輸入設備都足夠友好才行。考慮到你的表單可能會是不同類型的鍵盤輸入的，所以你應該根據表單欄位屬性和檢測到的鍵盤類型，進行適配。
5、選擇垂直單列布局
對於用戶而言，垂直單列的布局比起多列的布局更容易使用。當用戶瀏覽的時候，只需要向下瀏覽即可，不用來回翻看，也可以很好的避免填寫過程中的遺漏。
6、控制輸入內容
盡量使用瀏覽器的記憶功能和Cookie，調用數據將表單中常見的欄位預先填充進去。沒有什麼比打開表單其中的多數欄位已經自動填寫進去，更讓人興奮的了。
7、讓表單短而美
當你設計表單的時候，總想從用戶那兒盡可能多的獲取信息，一定要剋制住這個沖動!
只在表單中呈現重要信息，讓用戶盡可能少的填寫。如果稍後需要提供更多的信息，可以在其他的地方諸如電子郵件中向用戶獲取信息。當用戶已經完成注冊之後，你們後續推送信息、相互溝通、獲取信息的機會更多了。
盡量只保留必要的欄位供用戶填寫，不要提供冗餘的選項，讓表單小而美。

2、請用HTML語言設計一個表單程序

<html>
<head>
<title></title>
<script>
function check() {
f=0;
var choice = document.getElementsByName("choice");
for(var i=0;i<choice.length;i++){
if(choice[i].checked==true){
f++;
}
}
if(f==0){
alert("請選擇題目!");
f=0;
return false;
}
document.subname.submit();
}
</script>
</head>
<body>
<form name="subname" action="" method="get" onsubmit="return check();">
<font style="font-size:20px;">自願答題統計:</font><br>
<font style="font-size:15px;">您可選擇右面題目：</font>
<input input name="choice" type="checkbox" checked="true">題目一
<input input name="choice" type="checkbox">題目二<br>
<font style="font-size:15px;">您可選擇右面題目：</font>
<input input name="radio" type="radio" checked="true">願意
<input input name="radio" type="radio">不願意<br>
<input input name="button1" type="submit" value="發送表單">
<input input name="button2" type="reset" value="重新填寫">
</form>
</body>
</html>

3、求設計一個簡單的網頁內容寫一個html頁面，至少包含一個表格、一個表單； 30行以上；美觀不管

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style>
.fontStyle{
color:red;
font-size:18px;
font-weight:bold;
}
</style>
</head>

<body>
<p class="fontStyle">表格</p>
<table cellspacing="0" cellpadding="0" width="500" height="300" border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
</tr>
</table>
<p>----------------------------------------------------------------------------------------------</p>
<form id="form1" name="form1" method="post" action="">
<p class="fontStyle">表單</p>
<p>
<label for="name">姓名：</label>
<input type="text" name="name" id="name" />
</p>
<p>性別：
<input type="radio" name="sex" id="male" value="radio" /><label for="male">男</label>
<input type="radio" name="sex" id="female" value="radio2" /><label for="female">女</label></p>
<p>愛好：
<input type="checkbox" name="music" id="music" /><label for="music">聽音樂</label>
<input type="checkbox" name="web" id="web" /><label for="web">上網</label>
<input type="checkbox" name="book" id="book" /><label for="book">看書</label></p>
<p>
<label for="content">簡歷：</label>
<textarea name="content" id="content" cols="45" rows="5"></textarea>
</p>
</form>
</body>
</html>
把上面的代碼放到dw里，運行就好了，如果還不會，我把網頁傳給你吧！！！

4、網頁設計一個最簡單的表單提交！

你直接搜索當地可以提交這個表單的電話問下就OK啦

5、網頁製作 form什麼意思

表單標簽：
form 空白表單
input type="text" 文本域
input type="checkbox" 復選框
input type="radio" 單選框
input type="submit" 提交按鈕
input type="hidden" 隱藏域
textarea 文本區域
select 列表

6、HTML5網頁前端設計中如下圖表單的代碼怎麼寫？

下面是表單代碼，你直接再加屬性就可以了，表單用 table 寫比較簡單，div 太麻煩了；
<html xmlns=" http://www.dayinmandarin.com ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>黑板</title>
</head>
<body>
<div style="width:500px;">
<h1 style="width:500px;height:50px;color:#2A8DF0;border-bottom:#2A8DF0 solid 3px; text-align:center;">用戶注冊頁面</h1>
<table cellpadding="0" cellspacing="10" style="margin:0 auto;">
<tr>
<td align="right" valign="top"><div>用戶名：</div></td>
<td><input style='width:250px' value='請輸入用戶名' /></td>
</tr>
<tr>
<td align="right" valign="top"><div>密碼：</div></td>
<td><input style='width:250px' value='請輸入密碼' /></td>
</tr>
<tr>
<td align="right" valign="top"><div>確認：</div></td>
<td><input style='width:250px' value='請再次輸入密碼' /></td>
</tr>
<tr>
<td align="right" valign="top"><div>姓名：</div></td>
<td><input style='width:250px' value='請輸入真實姓名' /></td>
</tr>
<tr>
<td align="right" valign="top"><div>郵箱：</div></td>
<td><input style='width:250px' value='請輸入電子郵箱' /></td>
</tr>
</table>
<div align="center"><input style="width:100px;height:30px;text-align:center;line-height:30px;background:#2289F0;border:#2289F0;color:white;font-weight:bold;font-size:16px;" type="submit" value="提交注冊" /></div>
</div>
</body>
</html>

7、網頁設計中的表格！

<tr>
<td height="890" background="imega/2.gif" valign="top">
<table width="102%" height="25" border="0" cellpadding="5" cellspacing="1"> 
<tr>
<td width="11%"> </td>
<td width="17%" valign="top">|<a href="i.jsp">111</a></td>
<td width="30%" valign="top" >這一段表格至頂</td>
<td width="42%"> </td>
</tr>
</table>
</td>
</tr>

8、求以下網頁設計表格html代碼

代碼（大小有需要可以調）：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>練習使用HTML</title>
    </head>

    <body>
        <center>
            <table border="1px" cellpadding="0px" cellspacing="0px">
                <tr>
                    <td colspan="4" height="60px"></td>
                </tr>
                <tr>
                    <td width="200px" height="60px"></td>
                    <td width="200px" height="60px"></td>
                    <td width="200px" height="60px"></td>
                    <td width="200px" height="60px"></td>
                </tr>
                <tr>
                    <td colspan="4" height="60px"></td>
                </tr>
                <tr>
                    <td colspan="4" height="60px"></td>
                </tr>
                <tr>
                    <td colspan="4" height="60px"></td>
                </tr>
                <tr>
                    <td colspan="4" height="60px"></td>
                </tr>
            </table>
        </center>
    </body>

</html>

運行效果：

9、網頁設計表單～一道題

這邊是HTML
<form action="">
<label for="userName">用戶名：</label><input type="text" id="userName">
<label for="userName">密碼：</label><input type="text" id="pwd">
<input type="button" value="點擊這邊" id="btn">
</form>

這邊是JS
var userName = document.getElementById('userName'),
pwd = document.getElementById('pwd'),
button = document.getElementById('btn');
btn.onclick = function(){
console.log(1);
if (userName.value == "" || userName.value== " ") {
alert("用戶名為空");
}else if (pwd.value == "" || pwd.value == " ") {
alert("密碼為空");
}else {
alert("登入成功");
}
}

導航:首頁 > 萬維百科 > 網頁設計表單例子

網頁設計表單例子

與網頁設計表單例子相關的知識